具有相同名稱和不同ID的選擇字段的數組。

Question

我有一個選擇字段數組，所有字段都有相同的選項值列表。我想要得到的是，如果在任何一個字段中選擇了一個值，它就不應該顯示在另一個字段上。以下是一個示例代碼。例如，如果我有四個選擇字段，如果我在第一個字段上選擇「a」，則值「a」不應出現在下一個選擇字段中。與「b」，「c」和「d」的其他值相同。 我正在嘗試使用相同的Java腳本。我正處於學習階段。幫助將非常感激。由於

<select name='list' id='list_1'> 
    <option value='a'>a</option> 
    <option value='b'>b</option> 
    <option value='c'>c</option> 
    <option value='d'>d</option> 
</select> 
<select name='list' id='list_2'> 
<option value='b'>b</option> 
<option value='c'>c</option> 
<option value='d'>d</option> 

</select> 
<select name='list' id='list_3'> 
<option value='c'>c</option> 
<option value='d'>d</option> 
</select> 
<select name='list' id='list_4'> 
<option value='d'>d</option> 
</select> 

Answer 1

Fiddle

$(function(){ 
     $('#list_1').change(function(){ 
     var valueToRemove=$(this).val(); 

     $('select').not('#list_1').each(function(){ 
     var currentId=$(this).prop('id'); 
     $("#"+currentId+" option[value="+valueToRemove+"]").remove(); 
     }) 
    }) 
    }) 

Answer 2

既然你不想破壞數據，你需要隱藏的選項。 這很棘手，因爲你有多個狀態來組合。

你可以進行幾次IF比較，爲每個組和選項（yuck）硬編碼一個組合表，或者用JS的山來解決這個問題，但我認爲CSS更好。

完成此操作的一種簡單方法是使用CSS;單個元素上的多個類可將您的許多狀態轉換爲可即時且一般應用的規則（不需要硬編碼ID或名稱）。

<select name='list' id='list_1'> 
    <option value='a'>a</option>  <option value='b'>b</option> 
    <option value='c'>c</option>  <option value='d'>d</option> 
</select> 
<select name='list' id='list_2'> 
    <option value='a'>a</option>  <option value='b'>b</option> 
    <option value='c'>c</option>  <option value='d'>d</option> 
</select> 
<select name='list' id='list_3'> 
    <option value='a'>a</option>  <option value='b'>b</option> 
    <option value='c'>c</option>  <option value='d'>d</option> 
</select> 
<select name='list' id='list_4'> 
    <option value='a'>a</option>  <option value='b'>b</option> 
    <option value='c'>c</option>  <option value='d'>d</option> 
</select> 


<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> 
<script> 

var combos=[], // store the css we need to define hide/show rules 
    classes= new Array($("select").length); //a place to store many states 

$("select").each(function(i,e){ // for every drop down,  
    $(this).change(function(){ // when it changes: 
    classes[i]=this.value; // update array with changed value in right slot 
    document.body.className=classes.join(" "); // update body class with array 
    }); 

}); 

$("select option[value]").each(function(n, a){ // make css to hide each option if body has the same class: 
    combos.push("body."+a.value+" option[value='"+a.value+"'] "); 
}); 

//append the dynamic CSS to the head: 
$("head").append("<style> "+combos+"{ display: none; }</style>"); 

</script> 

在線演示：http://pagedemos.com/pe2uf5vkx9vh/如果要限制此功能，以一定的下拉菜單，讓他們像<select class=hider類，並在上面的代碼更改$("select到$("select.hider

。

如果您有空格的值，你需要票友CSS選擇器比類，像data-state="|a b|hello world|honda crv|" attribs，你可以界定，並與部分屬性選擇器（body[data-state*='|hello world|']...）打，但有許多多的相同的模式可以工作複雜的狀態。

Answer 3

試試這個代碼，我已經寫了。希望應該幫助

<select> 
    <option value="0"> </option> 
    <option value="1">a</option> 
    <option value="2">b</option> 
    <option value="3">c</option> 
</select> 
<select> 
    <option value="0"> </option> 
    <option value="1">a</option> 
    <option value="2">b</option> 
    <option value="3">c</option> 
</select> 
<select> 
    <option value="0"> </option> 
    <option value="1">a</option> 
    <option value="2">b</option> 
    <option value="3">c</option> 
</select> 

$(document).on('change', 'select', function() { 
    $(this).find('option:selected').addClass('keepit'); 
    $('option[value="' + this.value + '"]:not(.keepit)').remove(); 
}); 

https://jsfiddle.net/av46dbo1/