javascript - remove & add select box option if other selection changes

Question

I have 3 select boxes and all are having same value (clones) & created on change of reference table selection. now i want to manage the selection on the three Constraint dropdown so that it 'Does not show the selected one in other two' and user cant select the same from two. how to do it in jquery?

Code is -

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

     }

I am sure it should be something simple for a experienced jquery developer. thanks in advance.

Answer 1

更新为改进的解决方案！

我希望这会有所帮助，这是一个非常基本的演示，需要进行一些调整，但应该可以解决问题！ http://jsfiddle.net/BUuZv/2/

Answer 2

如果我对您的理解正确，那么您<option>在每个元素中都有具有相同值的元素，<select>并且您希望在选择<select>其中一个元素时禁用其他每个<option>元素中的选择。这是一个小片段，展示了我是如何做到的：

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/