刪除並添加選擇框選項，如果其他選擇更改

Question

我有3個選擇框和所有具有相同的值（克隆）&創建更改參考表選擇。 現在我想管理三個約束下拉選擇，以便它'不顯示在其他兩個選定的一個'和用戶不能從兩個選擇相同。 如何在jQuery中做到這一點？

守則 -

<tr> 
<td> Reference Table:</td> 
<td> 
    <select id="tableCombo" onchange="jQuery.ajax({type:'POST',data:'tableCombo=' +  this.value, url:'/GryphonMonitor /load/getColumns',success:function(data,textStatus) {jQuery('#columns').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown) {},complete:function(XMLHttpRequest,textStatus){LoadSelects();}});" name="tableCombo"> 
    </td> 
    </tr> 
    <tr id="cons"> 
<td nowrap=""> Constraint On: </td> 
<td nowrap=""> 
<select id="columns" onchange="colChange(this);" name="columns"> 
<option value="CountryCode">CountryCode</option> 
<option value="Date">Date</option> 
<option value="Number">Number</option> 
<option value="Type">Type</option> 
</select> 
</td> 
<td nowrap=""> Constraint Value: </td> 
<td nowrap=""> 
</tr> 
<tr id="cons1"> 
<td> Constraint On: </td> 
<td> 
<select id="columns2" onchange="colChange(this);" name="columns2"> 
<option value="CountryCode">CountryCode</option> 
<option value="Date">Date</option> 
<option value="Number">Number</option> 
<option value="Type">Type</option> 
</select> 
</td> 
<td> Constraint Value: </td> 
<td> 
</tr> 
<tr id="cons2"> 
    <td> Constraint On: </td> 
    <td> 
    <select id="columns3" onchange="colChange(this);" name="columns3"> 
<option value="CountryCode">CountryCode</option> 
<option value="Date">Date</option> 
<option value="Number">Number</option> 
<option value="Type">Type</option> 
</select> 
</td> 
<td> Constraint Value: </td> 
<td> 
    </tr> 

JS功能是這裏 -

function LoadSelects() 
{ 
$("#columns2, #columns3").html($("#columns").html()).val('') ; 
} 
    ///I am trying to do thru this menthod but does not look good. here looking for help. 


function getArray() 
{ 
    var selectElement = []; 
    $('#columns option').each(function() { 
selectElement.push($(this).val()) 
}); 
return selectElement;  
} 

function colChange(col){ 
selectElements = getArray(); 
var $this = col; 
for (i = 1; i < selectElements.length; i++) 
{ 
    if(col.value == selectElements[i]){ 
    if(col.name == 'columns'){ 
    $('#columns2').find('option[value=' + selectElements[i] + ']').remove(); 
$('#columns3').find('option[value=' + selectElements[i] + ']').remove(); 
     } 
else if(col.name == 'columns2'){ 
$('#columns').find('option[value=' + selectElements[i] + ']').remove(); 
$('#columns3').find('option[value=' + selectElements[i] + ']').remove(); 
      } 
else if(col.name == 'columns3'){ 
$('#columns').find('option[value=' + selectElements[i] + ']').remove(); 
$('#columns2').find('option[value=' + selectElements[i] + ']').remove(); 
      } 

    } 

我相信它應該是一個有經驗的jQuery開發簡單的東西。 在此先感謝。

Answer 1

更新到改進的解決方案！

我希望這可以幫助，這是一個非常基本的演示，需要一些調整，但應該做的伎倆！ http://jsfiddle.net/BUuZv/2/

Answer 2

如果我理解正確的話，你有<option>元素，在每個<select>相同的值，你要當選擇<option>元素之一，在其他各<select>元素的禁用選擇。這裏是展示我是怎麼做的一個小片段：

HTML

<select class="hello"> 
    <option value=""></option> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="A">A</option> 
</select> 
<select class="hello"> 
    <option value=""></option> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="B">B</option> 
</select> 
<select class="hello"> 
    <option value=""></option>  
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="C">C</option> 
</select> 

的jQuery

$(document).ready(function() { 
    $('select.hello').change(function() { 
     $('select.hello option').attr('disabled', false); 
     $('select.hello').each(function() { 
      var val = $(this).find('option:selected').val(); 
      if (!val) return; 
      $('select.hello option').filter(function() { 
       return $(this).val() == val; 
      }).attr('disabled', 'disabled'); 
     }); 
    }); 
}); 

這裏是一個鏈接的jsfiddle：http://jsfiddle.net/yLCVf/1/

Answer 3

我已經更新了代碼。這是你在找什麼

$('select').change(function() { 
 
    if ($(this).val() == 'other') { 
 
    $('#select1, #select2, #select3').not(this) 
 
     .children('option[value="other"]') 
 
     .remove() 
 
    } else { 
 
    if ($('#select1, #select2, #select3').not(this).find('option[value=other]').length > 0) { 
 

 
    } else { 
 

 
     ($('#select1, #select2, #select3').not(this) 
 
     .append('<option value="other">Other</option>')) 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select1" name="select1"> 
 
    <option>No Match</option> 
 
    <option value="1">Test</option> 
 
    <option value="2">Test 2</option> 
 
    <option value="other">Other</option> 
 
</select> 
 

 
<select id="select2" name="select2"> 
 
    <option>No Match</option> 
 
    <option value="1">Test</option> 
 
    <option value="2">Test 2</option> 
 
    <option value="other">Other</option> 
 
</select> 
 
<select id="select3" name="select3"> 
 
    <option>No Match</option> 
 
    <option value="1">Test</option> 
 
    <option value="2">Test 2</option> 
 
    <option value="other">Other</option> 
 
</select>

http://jsfiddle.net/dZqEu/2003/