jQuery选择框多个选项获取值和匹配值 [英] jQuery Select box multiple option get value and match values

问题描述

我有相同的类名多重选择框，体内具有相同的值，如果我想使用的是从第一个或任何选择框中选择值1，则所有其他选择框选项上的值1都将禁用，因此用户不能选择相同的值其他多重选择框中的值.

I have same classname multi select box with same values in body, what I want if use chose value 1 from first or any select box then that value 1 on all other select box option will disable so user can't choose the same value in other multi select box.

<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实现，

This need to achieve via javascript or jQuery,

推荐答案

因此，您很可能会投票不足.您实际上并没有证明您已尝试过任何东西，只是给了我们HTML并要求我们解决您的问题.

So you're likely going to get downvotes. You haven't actually shown that you've tried anything, you have only given us the HTML and asked that we solve your problem.

也就是说，我很喜欢陷入困境，就像这样.您想要做的是在每个选择中监听更改事件.触发后，获取所选选项的值，然后在其他任何选择中禁用具有该值的任何选项.看一下以下内容:

That said, I like to sink my teeth into easy problems, as this is. What you're wanting to do is, in each select, listen for the change event. When that triggers, get the value of the selected option, and disable any option with that value in any other selects. Take a look at the following:

$(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")将重新启用用户以某种方式未选中的任何选项.

Edited the above code to support multiple selects. Actually, it wasn't so much an issue of multiple selects, as I was doing a very lazy handling of unselecting options. Now, when the user is selecting or de-selecting options in any select, only the non-disabled options in that select are used: the (":checked") to disable that option in all other selects, and the .not(":checked") to re-enable any options that the user has somehow unselected.

这篇关于jQuery选择框多个选项获取值和匹配值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！