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

Question

我有3個選擇框，並且所有都具有相同的值（克隆）並在更改參考表選擇時創建。 現在我想管理三個Constraint下拉列表中的選擇，以便它“不顯示其他兩個中選定的一個”，用戶無法從兩個中選擇相同的。 如何在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

我已經更新了代碼。 這就是你要找的東西

 $('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/

Answer 3

如果我理解正確，那么每個<select> <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/