削除＆選択ボックスのオプションを追加し、他の選択は

Question

を変更した場合、私は3つの選択ボックスを持っているし、すべてが同じ値（クローン）を有するされている参照テーブルの選択の変化に作成さ&。 今、私は3つのConstraintドロップダウンで選択を管理して、「選択されたものを他の2つに表示しない」ようにし、ユーザーが2つから同じものを選択しないようにします。 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関数は、私はそれが経験豊富なjQueryの開発者のためのシンプルなものでなければなりません確信しているhere-

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(); 
      } 

    } 

です。ありがとうございます。 私が正しくあなたを理解していれば

Answer 1

ここに私がいることをやったかを示す小さな抜粋です改善された解決策！

私はそれは非常に基本的なデモだといくつかの調整を必要とするが、トリックを行う必要があり、このことができます願っています！ http://jsfiddle.net/BUuZv/2/

Answer 2

は、あなたが各<select>に同じ値を持つ<option>要素を持っていて、<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/