我有两个选择菜单。当我从一个选择中选择一个选项时,另一个选择的值应分别更改为“选择字母”或“选择数字”。
我尝试在两个选项上设置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);
});
答案 0 :(得分:1)
只需在.val()
元素上使用select
,即可将值设置为x
。 jQuery将为您完成剩下的工作。
$('body').on('change', '#sel_letter', function() {
$('#sel_num').val('x');
});
$('body').on('change', '#sel_num', function() {
$('#sel_letter').val('x');
});
&#13;
<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>
&#13;
甚至可以为两者使用一个事件。如果这些是静态元素,你就不需要代表团。仅举例:
$('#sel_letter, #sel_num').on('change', function(e) {
$($(e.target).is('#sel_letter') ? '#sel_num' : '#sel_letter').val('x');
});
答案 1 :(得分:0)
您也可以使用.not(selector)
案例1:对所有选择标记
进行广义化
$('select').on('change', function(e) {
$('select').not($(this)).val('x');
});
案例2:如果您想根据ID进行操作,那么您可以使用以下方式。
$('#sel_letter, #sel_num, #sel_alpha').on('change', function(e) {
$('#sel_letter, #sel_num, #sel_alpha').not($(e.target)).val('x');
});
$(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>