jQuery Select boîte multiple option obtenir la valeur et correspondre les valeurs

Question

J'ai même boîte de sélection multi-classe avec les mêmes valeurs dans le corps, ce que je veux si l'utilisation a choisi la valeur 1 de la première ou une boîte de sélection Désactivera donc l'utilisateur ne peut pas choisir la même valeur dans une autre boîte de sélection multiple.

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

Ce besoin d'obtenir via javascript ou jQuery,

Answer 1

Donc, vous allez probablement obtenir downvotes. Vous n'avez pas réellement montré que vous avez essayé quelque chose, vous nous avez seulement donné le HTML et demandé que nous résolvions votre problème.

Cela dit, j'aime bien m'enfoncer les dents dans des problèmes faciles, comme cela. Ce que vous voulez faire est, dans chaque sélection, écouter l'événement de changement. Lorsque cela se déclenche, obtenez la valeur de l'option sélectionnée et désactivez toute option avec cette valeur dans les autres sélections. Jetez un oeil à l'adresse suivante:

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

Edité le code ci-dessus pour soutenir les sélections multiples. En fait, ce n'était pas vraiment un problème de sélections multiples, car je faisais un traitement très paresseux des options de désélection. Maintenant, lorsque l'utilisateur sélectionne ou désélectionne des options dans une sélection, seules les options non désactivées dans cette sélection sont utilisées: (":checked") pour désactiver cette option dans toutes les autres sélections, et .not(":checked") pour réactiver toutes les options l'utilisateur a en quelque sorte non sélectionné.

Answer 2

Essayez ce code, il doit faire le travail: l'aide du sélecteur Not et for each à itérer sur d'autres options de sélection:

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