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

Updated to an improved solution!

I hope this helps, it's a very basic demo and needs a few adjustments but should do the trick! http://jsfiddle.net/BUuZv/2/

Answer 2

I have updated the code. This is what you are looking for

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

If I understand you correctly, you have <option> elements with the same value in each <select> and you want to disable selection in the each of the other <select> elements when one of the <option> elements is selected. Here's a small snippet showing how I did that:

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

And here is a link to the jsFiddle: http://jsfiddle.net/yLCVf/1/