title: Display items of drop down based on each other
body: <p>1) I have two drop downs with exactly the same values. I want the drop down 2 to display the values based on the selection of items of drop down 1. So the selected index of drop down 2 will be equal to or more than the selected index of drop down 1. ( this code is working)</p>
  
  <p>but When I add one more drop down and based on its items the other two dropdowns should behave as:</p>
  
  <p>2) If I select <strong>TCD</strong> in the first Dropdown and change to value B in the second dropdown the value should be B in the third dropdown too but If I select <strong>BCD</strong> from the first dropdown it should retain the values of other two dropdown from the previous selection.( should not go back to A)</p>
  
  <p>The first part is working but the second part is having issues.</p>
  
  <p>Fiddle : 1) <a href="http://jsfiddle.net/wtLm4805/2/" rel="nofollow">http://jsfiddle.net/wtLm4805/2/</a></p>
  
  <p>Fiddle with three dropdowns : 2) <a href="http://jsfiddle.net/wtLm4805/3/" rel="nofollow">http://jsfiddle.net/wtLm4805/3/</a></p>
  
  <pre><code> while (select2.firstChild) {
      select2.removeChild(select2.firstChild);
  }
  
  for (var i = 0; i &lt; select1.options.length; i++) {
      var o = document.createElement("option");
      o.value = select1.options[i].value;
      o.text = select1.options[i].text;
      (i &lt; select1.selectedIndex) 
  ? o.disabled = true 
  : o.disabled = false ;        
      select2.appendChild(o);
  }
  </code></pre>
  
  <p>Where am I going wrong ?</p>