title: Dropdown values filter based on another dropdown javascript
body: <p>Here i have three dropdown lists each contains same number of values.So the question is If value 'one' is selected from '#dropdownone'. it should not show value 'one' for the rest of the two dropdown menus. Also if some value is selected from '#dropdowntwo' it should not show the values in the dropdown for the other two elements list. same case for the '#dropdownthree'. But if other values are selected from the list. the previously selected values will show in the rest of the dropdown lists.<br>
  <a href="http://jsfiddle.net/htoniv/4ysmvkgp/" rel="nofollow">FIDDLE</a> <br></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select id='dropdownone'&gt;&lt;/select&gt;
  &lt;select id='dropdowntwo'&gt;&lt;/select&gt;
  &lt;select id='dropdownthree'&gt;&lt;/select&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var numbers = ['one', 'two', 'three', 'four', 'five'];
  $.each(numbers, function( key, value ) {
      if (key == 0) {
          $("#dropdownone").append("&lt;option selected='selected' value='"+key+"'&gt;"+value+"&lt;/option&gt;");
          $("#dropdowntwo").append("&lt;option value='"+key+"'&gt;"+value+"&lt;/option&gt;");
          $("#dropdownthree").append("&lt;option value='"+key+"'&gt;"+value+"&lt;/option&gt;");
  
      } else if (key == 1) {
          $("#dropdownone").append("&lt;option value='"+key+"'&gt;"+value+"&lt;/option&gt;");
          $("#dropdownthree").append("&lt;option value='"+key+"'&gt;"+value+"&lt;/option&gt;");
          $("#dropdowntwo").append("&lt;option selected='selected' value='"+key+"'&gt;"+value+"&lt;/option&gt;");
      } else if (key == 2) {
          $("#dropdownone").append("&lt;option value='"+key+"'&gt;"+value+"&lt;/option&gt;");
          $("#dropdowntwo").append("&lt;option value='"+key+"'&gt;"+value+"&lt;/option&gt;");
          $("#dropdownthree").append("&lt;option selected='selected' value='"+key+"'&gt;"+value+"&lt;/option&gt;");
      } else {
          $("#dropdownone").append("&lt;option value='"+key+"'&gt;"+value+"&lt;/option&gt;");
          $("#dropdowntwo").append("&lt;option value='"+key+"'&gt;"+value+"&lt;/option&gt;");
         $("#dropdownthree").append("&lt;option value='"+key+"'&gt;"+value+"&lt;/option&gt;");    
      }
  });
  </code></pre>
  
  <p><strong>Note:</strong> I need the function works in <strong>onchange</strong> event<br>
  for example <br>
  <strong><em>first time value selection</em></strong> if value 'one' is selected from '#dropdownone' it should not show the <code>one</code> value in '#dropdowntwo' &amp; '#dropdownthree'. <br>
  <strong><em>second time value selection</em></strong> if value 'two' is selected from '#dropdownone' it should not show the value <code>two</code> in '#dropdowntwo' &amp; '#dropdownthree'. but the prevoiusly selected value 'one' should show for the two dropdown elements<br>
  <strong><em>third time value selection</em></strong> if again value 'one' is selected from '#dropdownone' it should not show the value in '#dropdowntwo' &amp; '#dropdownthree'. <br></p>