title: remove & add select box option if other selection changes
body: <p>I have 3 select boxes and all are having same value (clones) &amp;  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? </p>
  
  <p><img src="https://i.stack.imgur.com/tQAr2.jpg" alt="enter image description here"></p>
  
  <p>Code is -</p>
  
  <pre><code>&lt;tr&gt;
  &lt;td&gt; Reference Table:&lt;/td&gt;
  &lt;td&gt;
     &lt;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"&gt;
    &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr id="cons"&gt;
  &lt;td nowrap=""&gt; Constraint On: &lt;/td&gt;
  &lt;td nowrap=""&gt;
  &lt;select id="columns" onchange="colChange(this);" name="columns"&gt;
  &lt;option value="CountryCode"&gt;CountryCode&lt;/option&gt;
  &lt;option value="Date"&gt;Date&lt;/option&gt;
  &lt;option value="Number"&gt;Number&lt;/option&gt;
  &lt;option value="Type"&gt;Type&lt;/option&gt;
  &lt;/select&gt;
  &lt;/td&gt;
  &lt;td  nowrap=""&gt; Constraint Value: &lt;/td&gt;
  &lt;td  nowrap=""&gt;
   &lt;/tr&gt;
  &lt;tr id="cons1"&gt;
  &lt;td&gt; Constraint On: &lt;/td&gt;
  &lt;td&gt;
  &lt;select id="columns2" onchange="colChange(this);" name="columns2"&gt;
  &lt;option value="CountryCode"&gt;CountryCode&lt;/option&gt;
  &lt;option value="Date"&gt;Date&lt;/option&gt;
  &lt;option value="Number"&gt;Number&lt;/option&gt;
  &lt;option value="Type"&gt;Type&lt;/option&gt;
   &lt;/select&gt;
  &lt;/td&gt;
  &lt;td&gt; Constraint Value: &lt;/td&gt;
  &lt;td&gt;
   &lt;/tr&gt;
   &lt;tr id="cons2"&gt;
     &lt;td&gt; Constraint On: &lt;/td&gt;
    &lt;td&gt;
    &lt;select id="columns3" onchange="colChange(this);" name="columns3"&gt;
  &lt;option value="CountryCode"&gt;CountryCode&lt;/option&gt;
  &lt;option value="Date"&gt;Date&lt;/option&gt;
  &lt;option value="Number"&gt;Number&lt;/option&gt;
  &lt;option value="Type"&gt;Type&lt;/option&gt;
  &lt;/select&gt;
  &lt;/td&gt;
  &lt;td&gt; Constraint Value: &lt;/td&gt;
  &lt;td&gt;
    &lt;/tr&gt;
  </code></pre>
  
  <p>JS functions are here-</p>
  
  <pre><code> 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 &lt; 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();
               }
  
       }
  </code></pre>
  
  <p>I am sure it should be something simple for a experienced jquery developer.
  thanks in advance.</p>