在第二次选择中选择2更改属性

Select2 change attr in second select

本文关键字：选择 属性 第二次      更新时间：2023-09-26

当在第一个<select>中选择了相同的值时，如何在第二个<select>中更改<option>的属性？

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

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

这里有一个统一的方法。

$("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中选择的选项时，您可能也想在第二次选择中自动选择（踢到）另一个选项。如果这有意义：-）

对于select2版本>=4.0

解决方案：

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


$("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>

相关文章：