jQuery Select box multiple option 获取值和匹配值

Question

我有相同的类名 multi select 框，在主体中具有相同的值，如果使用从第一个或任何 select 框选择值 1，然后在所有其他 [=19] 上选择值 1，我想要什么=] 框选项将被禁用，因此用户无法在其他多 select 框中选择相同的值。

<select name="mySel" class="myselect" multiple="multiple">
          <option value="val1">option 1</option>
          <option value="val2">option 2</option>
          <option value="val3">option 3</option>
          <option value="val4">option 4</option>
</select>
<select name="mySel" class="myselect" multiple="multiple">
          <option value="val1">option 1</option>
          <option value="val2">option 2</option>
          <option value="val3">option 3</option>
          <option value="val4">option 4</option>
</select>

这需要通过javascript或jQuery、

来实现

Answer 1

所以你很可能会被否决。你实际上并没有表现出你已经尝试过任何东西，你只是给了我们 HTML 并要求我们解决你的问题。

就是说，我喜欢钻研简单的问题，就像现在这样。您想要做的是，在每个 select 中侦听更改事件。当触发时，获取 selected 选项的值，并在任何其他 selects 中禁用具有该值的任何选项。看看以下内容：

$(function() {
  /********
   * Function to disable the currently selected options
   *   on all sibling select elements.
   ********/
  $(".myselect").on("change", function() {
    // Get the list of all selected options in this select element.
    var currentSelectEl = $(this);
    var selectedOptions = currentSelectEl.find("option:checked");
    
    // otherOptions is used to find non-selected, non-disabled options
    //  in the current select. This will allow for unselecting. Added
    //  this to support extended multiple selects.
    var otherOptions = currentSelectEl.find("option").not(":checked").not(":disabled");

    // Iterate over the otherOptions collection, and using
    //   each value, re-enable the unselected options that
    //   match in all other selects.
    otherOptions.each(function() {
      var myVal = $(this).val();
      currentSelectEl.siblings(".myselect")
        .children("option[value='" + myVal + "']")
        .attr("disabled", false);
    })

    // iterate through and disable selected options.
    selectedOptions.each(function() {
      var valToDisable = $(this).val();
      currentSelectEl.siblings('.myselect')
        .children("option[value='" + valToDisable + "']")
        .attr("disabled", true);
    })

  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="mySel" class="myselect" multiple="multiple">
  <option value="val1">option 1</option>
  <option value="val2">option 2</option>
  <option value="val3">option 3</option>
  <option value="val4">option 4</option>
</select>
<select name="mySel2" class="myselect" multiple="multiple">
  <option value="val1">option 1</option>
  <option value="val2">option 2</option>
  <option value="val3">option 3</option>
  <option value="val4">option 4</option>
</select>
<select name="mySel3" class="myselect" multiple="multiple">
  <option value="val1">option 1</option>
  <option value="val2">option 2</option>
  <option value="val3">option 3</option>
  <option value="val4">option 4</option>
</select>
<select name="mySel4" class="myselect" multiple="multiple">
  <option value="val1">option 1</option>
  <option value="val2">option 2</option>
  <option value="val3">option 3</option>
  <option value="val4">option 4</option>
</select>

编辑了以上代码以支持多个 select。实际上，这并不是多个 select 的问题，因为我正在对未 select 选项进行非常懒惰的处理。现在，当用户在任何 select 中 selecting 或 de-selecting 选项时，仅使用该 select 中的非禁用选项：(":checked") 在所有其他 select 中禁用该选项，而 .not(":checked") 重新启用用户以某种方式取消select 的任何选项。

Answer 2

试试这段代码，它应该可以完成工作：使用 Not select 或 for each 迭代其他 select 选项：

    $(document).ready(function() {
    $('.myselect:first').change(function() { // once you change the first select box 
        var s = $('.myselect:first option:selected').val(); // get changed or clicked value
        others = $(':not(.myselect:first) >option'); //select other controls with option value
        others.each(function() {
            if (this.value == s) // for example if you click on 1 the other controls will get 1 disabled
                $(this).attr('disabled', 'disabled').siblings().removeAttr('disabled');
            // remove disabled from others if you click something else 
        });
    });
});

   

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select class="myselect" multiple="multiple" name="mySel">
        <option value="val1">option 1</option>
        <option value="val2">option 2</option>
        <option value="val3">option 3</option>
        <option value="val4">option 4</option>
</select>
<select class="myselect" multiple="multiple" name="mySel">
        <option value="val1">option 1</option>
        <option value="val2">option 2</option>
        <option value="val3">option 3</option>
        <option value="val4">option 4</option>
</select>

jQuery Select box multiple option 获取值和匹配值

jQuery Select box multiple option get value and match values

html

javascript

jquery

jquery-selectors