处理选择

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

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

＆＃13;

＆＃13;

$('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;

＆＃13;

＆＃13;

甚至可以为两者使用一个事件。如果这些是静态元素，你就不需要代表团。仅举例：

$('#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进行操作，那么您可以使用以下方式。

$('#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>