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

Question

我有两个下拉列表，我想从一个下拉列表中单击或更改，第二个设置为默认值，反之亦然

//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>