jQuery选择框多个选项获取值和匹配值

Question

我有相同的类名多选框，在正文中具有相同的值，如果使用从第一个或任何选择框选择值 1，那么我想要的所有其他选择框选项上的值 1 将禁用，因此用户不能选择相同其他多选框中的值。

<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 并要求我们解决您的问题。

也就是说，我喜欢把自己的牙齿埋在简单的问题上，就像这样。您想要做的是，在每个选择中，侦听更改事件。当触发时，获取所选选项的值，并在任何其他选择中禁用具有该值的任何选项。看看以下内容：

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

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

Answer 2

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

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