不允許重複在不同的HTML選擇與JavaScript或JQuery相同的內容

Question

我有不同的選擇與相同的內容，我想要控制，用戶不會把相同的值在兩個或更多的選擇，我讓這個代碼，但我認爲有一些選擇比這更好，我把這裏的代碼分享，同時詢問是否存在一些更好的選擇。因爲我搜索這樣的解決方案，我找不到。

$(function() { 
 
    function restrict_multiple(selector) { 
 
     // Here sets the current value in your alt 
 
     $(selector).each(function() { 
 
      $(this).attr("alt", $(this).val()); 
 
     }) 
 
     // trigger when the select change 
 
     $(selector).change(function() { 
 
      // Remove the hidden from the <option> 
 
      $(selector + " option").removeClass("hidden"); 
 
      
 
      // I use thr alt attr, like an aid to maintain the actual selected value 
 
      $(this).attr("alt", $(this).val()) 
 
      
 
      // Create an array with the selected options 
 
      var selected = new Array(); 
 
      
 
      // Every selected option is assigned into this array 
 
      $(selector + " option:selected").each(function() { 
 
       selected.push(this.value); 
 
      }) 
 
         
 
      // Apply the hidden the other select options 
 
      for (k in selected) { 
 
       if(selected[k] != ""){ 
 
        $(selector + "[alt!=" + selected[k] + "] option[value=" + selected[k] + "]").addClass("hidden") 
 
       } 
 
      } 
 
      
 
     }) 
 
     
 
     // trigger to keep updated all selects 
 
     $(selector).each(function() { $(this).trigger("change"); }) 
 
    } 
 
    
 
    //calling the function again sending the class 
 
    restrict_multiple(".excluyent-select"); 
 
})

.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<select name="participantes_1" id="participantes_1" class="excluyent-select" > 
 
    <option value="">Seleccionar</option> 
 
    <option value="1">111111111111111111</option> 
 
    <option value="2">222222222222222222</option> 
 
    <option value="3">333333333333333333</option> 
 
    <option value="4">444444444444444444</option> 
 
    <option value="5">555555555555555555</option> 
 
    <option value="6">666666666666666666</option> 
 
    <option value="7">777777777777777777</option> 
 
    <option value="8">888888888888888888</option> 
 
    <option value="9">999999999999999999</option> 
 
</select><br /> 
 
<select name="participantes_2" id="participantes_2" class="excluyent-select" > 
 
    <option value="">Seleccionar</option> 
 
    <option value="1">111111111111111111</option> 
 
    <option value="2">222222222222222222</option> 
 
    <option value="3">333333333333333333</option> 
 
    <option value="4">444444444444444444</option> 
 
    <option value="5">555555555555555555</option> 
 
    <option value="6">666666666666666666</option> 
 
    <option value="7">777777777777777777</option> 
 
    <option value="8">888888888888888888</option> 
 
    <option value="9">999999999999999999</option> 
 
</select><br />

在這裏，我把鏈接給一些例如運行：http://jsfiddle.net/hevercking/xdmd87se/

Answer 1

我改變了JS代碼做這種方式：

$(function() { 

    function restrict_multiple(selector) { 

     $(selector).each(function() {$(this).attr("alt", $(this).val());}); 

     $(selector).on('change', function() { 

      var ind = $(this).index(); 
      var val = $(this).val(); 
      var alt = $(this).attr('alt'); 

      $(selector).each(function() { 

       $(this).find("option[value="+alt+"]").removeClass("hidden"); 

       if($(this).index() != ind && val != "") { 
        $(this).find("option[value="+val+"]").addClass("hidden"); 
       } 

      }); 

      $(this).attr('alt', val); 

     }); 

    } 

    restrict_multiple(".excluyent-select"); 

}) 

讓我知道如果它工作正常：http://jsfiddle.net/48zmLm7x/5/

Answer 2

太棒了！我更喜歡你的選擇，但我發現的兩個選項有一個問題，我不知道如何解決，如果我生成一個選擇。

for (var i=0; i < 2; i++) { 
 
    $('<p><select name="grup_'+i+'" id="grup_'+i+'" class="excluyent-select")"><option value="">Seleccionar</option><option value="1">111111111111111111</option><option value="2">222222222222222222</option><option value="3">333333333333333333</option><option value="4">444444444444444444</option><option value="5">555555555555555555</option><option value="6">666666666666666666</option><option value="7">777777777777777777</option><option value="8">888888888888888888</option><option value="9">999999999999999999</option></select></p>').appendTo('#selecs'); 
 
} 
 

 
$(function() { 
 
    
 
    function restrict_multiple(selector) { 
 
     
 
     $(selector).each(function() {$(this).attr("alt", $(this).val());}); 
 
     
 
     $(selector).on('change', function() { 
 
      
 
      var ind = $(this).index(); 
 
      var val = $(this).val(); 
 
      var alt = $(this).attr('alt'); 
 
      
 
      $(selector).each(function() { 
 
       
 
       $(this).find("option[value="+alt+"]").removeClass("hidden"); 
 
       
 
       if($(this).index() != ind && val != "") { 
 
        $(this).find("option[value="+val+"]").addClass("hidden"); 
 
       } 
 
       
 
      }); 
 
      
 
      $(this).attr('alt', val); 
 
      
 
     }); 
 
     
 
    } 
 
    
 
    restrict_multiple(".excluyent-select"); 
 
    
 
})

.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="selecs"> 
 
    
 
</div>

在這種情況下

不要運行http://jsfiddle.net/hevercking/t3qg45v3/

我設法讓與的onChange但只是開始刪除當我改變一個選擇第二次，如果我改變不猿再次，直到刪除所有選項在其他選擇，我把這裏的例子：http://jsfiddle.net/hevercking/e4scbtre/3/