jQuery Select box multiple option get value and match values

问题

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> 

This need to achieve via javascript or jQuery,

回答1:

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>

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.

回答2:

Try this code , it should do the job: using Not selector and for each to iterate on other select options:

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

来源：https://stackoverflow.com/questions/45803813/jquery-select-box-multiple-option-get-value-and-match-values