选择处理onchange事件

Question

我有两个选择菜单。当我从一个选择中选择一个选项时，另一个选择的值应分别更改为“选择字母”或“选择数字”。

我试图在两个选择上设置onchange事件，它的工作原理，但只有第一次更改后。例如，当我在“选择字母”菜单中选择选项“A”后，选择“选择数字”中的某个选项时，“选择字母”值将设置为“选择字母”，就像我想要的那样。但是当我再次做同样的操作时，它不起作用。

<select id="sel_letter"> 
     <option value="x">Select Letter</option> 
     <option value="a">A</option> 
     <option value="b">B</option> 
     <option value="c">C</option> 
    </select> 

    <select id="sel_num"> 
     <option value="x">Select Number</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 

JS：

$('body').on('change', '#sel_letter', function (event) { 
     var selected_op = $('#sel_num').find("option[value=x]"); 
     selected_op.attr("selected", true); 
    }); 

    $('body').on('change', '#sel_num', function (event) { 
     var selected_op = $('#sel_letter').find("option[value=x]"); 
     selected_op.attr("selected", true); 
    }); 

Answer 1

的select元素只需使用.val()，将值设置为x。 jQuery将为您完成剩下的工作。

$('body').on('change', '#sel_letter', function() { 
 
    $('#sel_num').val('x'); 
 
}); 
 

 
$('body').on('change', '#sel_num', function() { 
 
    $('#sel_letter').val('x'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="sel_letter"> 
 
    <option value="x">Select Letter</option> 
 
    <option value="a">A</option> 
 
    <option value="b">B</option> 
 
    <option value="c">C</option> 
 
</select> 
 

 
<select id="sel_num"> 
 
    <option value="x">Select Number</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select>

只使用一个事件两个它甚至可能。如果这些是静态元素，则不需要委派。只有例如：

$('#sel_letter, #sel_num').on('change', function(e) { 
    $($(e.target).is('#sel_letter') ? '#sel_num' : '#sel_letter').val('x'); 
}); 

Answer 2

您还可以使用.not(selector)

案例1：概括为所有选择标签

$('select').on('change', function(e) { 
    $('select').not($(this)).val('x'); 
}); 

案例2：如果你想要做的话，基于id然后y你可以使用以下方法。

$('#sel_letter, #sel_num, #sel_alpha').on('change', function(e) { 
    $('#sel_letter, #sel_num, #sel_alpha').not($(e.target)).val('x'); 
}); 

siblings

$(this).siblings().val('x'); 

$('#sel_letter, #sel_num, #sel_alpha').siblings().not(this).val('x'); 

//.not(selector) used 
 
$('#sel_letter, #sel_num, #sel_alpha').on('change', function(e) { 
 
    $('#sel_letter, #sel_num, #sel_alpha').not(this).val('x'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="sel_letter"> 
 
    <option value="x">Select Letter</option> 
 
    <option value="a">A</option> 
 
    <option value="b">B</option> 
 
    <option value="c">C</option> 
 
</select> 
 

 
<select id="sel_num"> 
 
    <option value="x">Select Number</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 

 
<select id="sel_alpha"> 
 
    <option value="x">Select Alpha</option> 
 
    <option value="1">ABC1</option> 
 
    <option value="2">XYZ2</option> 
 
    <option value="3">PQR3</option> 
 
</select>