title: Remove a drop down item if it is selected
body: <p>I have multiple instances of select drop downs on a form, eight to be exact. If I select a number on the first select drop down I want to hide the selected number from the second select drop down up to eighth.</p>
  
  <p>For the purpose of this I will only show two of the eight select drop downs.</p>
  
  <p>View Code - </p>
  
  <p>Select drop down one - </p>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-3"&gt;
  &lt;div class="form-group"&gt;
      &lt;?php echo Form::label('test_id', 'Test', array('class' =&gt; 'col-xs-3 control-label')) ?&gt;
      &lt;div class="col-xs-9"&gt;
          &lt;select name="test_id" id="test_id" class="form-control select2" data-placeholder="Select..."&gt;
              &lt;option value=""&gt;&lt;/option&gt;                                       
              &lt;?php foreach (ORM::factory('Test')-&gt;order_by('id')-&gt;find_all() as $row) : ?&gt;
              &lt;option value="&lt;?php echo $row-&gt;id ?&gt;" 
              &lt;?php if ($b-&gt;id == $row-&gt;id) echo 'selected="selected"' ?&gt;&gt;
              &lt;?php echo $row-&gt;id ?&gt;&lt;/option&gt;
              &lt;?php endforeach ?&gt;
         &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p> </p>
  
  <p>Select drop down two- </p>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-3"&gt;
  &lt;div class="form-group"&gt;
      &lt;?php echo Form::label('test_id', 'Test', array('class' =&gt; 'col-xs-3 control-label')) ?&gt;
      &lt;div class="col-xs-9"&gt;
          &lt;select name="test_id" id="test_id" class="form-control select2" data-placeholder="Select..."&gt;
              &lt;option value=""&gt;&lt;/option&gt;                                       
              &lt;?php foreach (ORM::factory('Test')-&gt;order_by('id')-&gt;find_all() as $row) : ?&gt;
              &lt;option value="&lt;?php echo $row-&gt;id ?&gt;" 
              &lt;?php if ($b-&gt;id == $row-&gt;id) echo 'selected="selected"' ?&gt;&gt;
              &lt;?php echo $row-&gt;id ?&gt;&lt;/option&gt;
              &lt;?php endforeach ?&gt;
         &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p> </p>
  
  <p>jQuery Code - </p>
  
  <pre><code>var $selects = $('select');
  $('select').change(function () {
      $('option:hidden', $selects).each(function () {
          var self = this,
              toShow = true;
          $selects.not($(this).parent()).each(function () {
              if (self.value == this.value) toShow = false;
          })
          if (toShow) $(this).show();
      });
      if (this.value != "") //to keep default option available
        $selects.not(this).children('option[value=' + this.value + ']').hide();
  });
  </code></pre>
  
  <p>This does not work in the slightest.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Cheers</p>