title: Change two select elements on changing the first
body: <p>I have three select items like this:</p>
  
  <pre><code> &lt;select name="select1" id="select1"&gt;
   &lt;option value="1"&gt;Item 1&lt;/option&gt;
   &lt;option value="2"&gt;Item 2&lt;/option&gt;
   &lt;option value="3"&gt;Item 3&lt;/option&gt;
   &lt;/select&gt;
  
   &lt;select name="select2" id="select2"&gt;
   &lt;option value="1"&gt;Item 1 second&lt;/option&gt;
   &lt;option value="2"&gt;Item 2 second&lt;/option&gt;
   &lt;option value="3"&gt;Item 3 second&lt;/option&gt;
   &lt;/select&gt;
  
   &lt;select name="select3" id="select3"&gt;
   &lt;option value="1"&gt;Item 1 third&lt;/option&gt;
   &lt;option value="2"&gt;Item 2 third&lt;/option&gt;
   &lt;option value="3"&gt;Item 3 third&lt;/option&gt;
   &lt;/select&gt;
  </code></pre>
  
  <p>With the following code I achieved to change the second select element:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;//&lt;![CDATA[ 
   $(window).load(function(){
   $("#select1").change(function() { 
   if($(this).data('options') == undefined){
   /*Taking an array of all options-2 and kind of embedding it on the select1*/
   $(this).data('options',$('#select2 option, #select3 option').clone());
   } 
   var id = $(this).val();
   var options = $(this).data('options').filter('[value=' + id + ']');
   $('#select2, #select3').html(options);
   });
  
   });//]]&gt;  
   &lt;/script&gt;
  </code></pre>
  
  <p><strong>SEE DEMO:</strong> <a href="http://jsfiddle.net/MNs9t/" rel="nofollow">http://jsfiddle.net/MNs9t/</a></p>
  
  <p>This works fine, except that I want to change the options in select3 as well to the chosen item from select 1. So I tried the following code:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;//&lt;![CDATA[ 
   $(window).load(function(){
   $("#select1").change(function() { 
   if($(this).data('options') == undefined){
   /*Taking an array of all options-2 and kind of embedding it on the select1*/
   $(this).data('options',$('#select2 option, #select3 option').clone());
   } 
   var id = $(this).val();
   var options = $(this).data('options').filter('[value=' + id + ']');
   $('#select2, #select3').html(options);
   });
  
   });//]]&gt;  
   &lt;/script&gt;
  </code></pre>
  
  <p>But this will display all the options from select2 and select3 in both select items. I want to do the same thing in select3 as in select2... Can someone help?</p>
  
  <p><strong>SEE DEMO:</strong> [http://jsfiddle.net/MNs9t/1/][2]</p>