Question

我有两个下拉列表，我希望onclick或onchange from one，第二个设置为默认值，反之亦然

//first dropdown   
 @Html.DropDownList("Agent_Id", null, "Séléctionnez un élément", htmlAttributes: new { @class = "form-control select2 unselected", required = "Séléctionnez un élément" }) 

   // second drop down
 @Html.DropDownList("TypeEntite_Id", null, "Séléctionnez un élément", htmlAttributes: new { @class = "form-control select2 unselected", required = "Séléctionnez un élément" })

我尝试使用jquery代码来处理这个问题，但我找不到正确的方法

        $('.unselected').change(function () {


            $(this).addClass('selected');

            if ($('.unselected').hasClass('selected')) {
                $('.unselected').removeClass('selected');
                $(this).addClass('selected');
            }

            if ($(this).hasClass('selected') )
            {
                $('.unselected').not(this).each(function () {
                    $('.unselected').val("");
                });

            }

Answer 1

试试这个：

// hook to select change
$('.form-control.select2').change(function() {

    // remove unselected and add selected css class
    $(this).toggleClass('selected unselected');

    // unselect all other .unselected values
    $('.form-control.select').not($(this)).removeClass('selected').addClass('unselected').val('');

});

Answer 2

可以将其简化为

var $selects = $('select.select2').change(function() {  
  $selects.not(this).val('');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select2">
  <option value="">-- Choose something --</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="select2">
  <option value="">-- Choose something --</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

当我点击第二个下拉列表时，在第一个下拉列表中选择默认值

2 个答案: