删除并添加选择框选项，如果其他选择更改

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/