Question

如果在第一个<option>中选择了相同的值，我可以在第二个<select>中更改<select>的属性吗？

更具体地说：当我在第一个<select>中选择一个选项时，应禁用第二个<select>中的相同选项。

＆＃13;

$("body").on("select2:select", "#first", function(e) {
  var cur_id = e.params.data.id;
  $("#second").children("option[value=" + cur_id + "]").attr("disabled", "disabled");
  $("#second").trigger('refresh');
  $("#first").trigger('refresh');
});

$("body").on("select2:select", "#second", function(e) {
  var cur_id = e.params.data.id;
  $("#first").children("option[value=" + cur_id + "]").attr("disabled", "disabled");
  $("#second").trigger('refresh');
  $("#first").trigger('refresh');
});

＆＃13;

<body>
  <select id="first" name="first">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  
  <select id="second" name="second">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</body>

＆＃13;

Answer 1

这是一种明智的方法。

$("select#first").on("change", function() {
  $("select#second option").each(function() {
    if ($("select#first option:selected").val() === $(this).val()) $(this).prop("disabled", true);
    else $(this).prop("disabled", false);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <select id="first" name="first">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  
  <select id="second" name="second">
    <option value="1" disabled="disabled">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</body>

当用户选择在第二个select中选择的选项时，您可能还想在第二个选择中自动选择（踢到）另一个选项。如果这是有道理的： - ）

Answer 2

对于select2版本＆gt; = 4.0.0

解决方案：

$("select").val("1").trigger("change");

Answer 3

$("body").on("change", "#first", function(e) {//use change event
  var cur_id = $('option:selected',this).val();//get value of selected option
  console.log(cur_id);
  $(this).siblings("#second").children("option[value=" + cur_id + "]").attr("disabled", "disabled");//disable from sibling the selected option
});

$("body").on("change", "#second", function(e) {//use change event
  var cur_id = $('option:selected',this).val();//get value of selected option
  console.log(cur_id);
  $(this).siblings("#first").children("option[value=" + cur_id + "]").attr("disabled", "disabled");//disable from sibling the selected option
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <select id="first" name="first">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  
  <select id="second" name="second">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</body>

选择2在第二个选择中更改attr

3 个答案: