jQuery Select box multiple option値を取得して値を一致させよう

Question

bodyで同じ値を持つ複数の同じselectnameボックスを持っています。最初の値を選択した場合は値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

だから、あなたはおそらくdownvotesを取得するつもりです。実際に何か試してみたことはありませんでした。あなたは私たちに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>