title: jQuery Multiple Select Filter :first
body: <p>I previously posted a script to dynamically filter my select menus (<a href="http://stackoverflow.com/questions/9516736/why-does-my-jquery-filter-only-work-once-on-this-select-element">http://stackoverflow.com/questions/9516736/why-does-my-jquery-filter-only-work-once-on-this-select-element</a>)</p>
  
  <p>Now I'm having a bit of a problem.</p>
  
  <p>I'm trying to allow the user to:</p>
  
  <ol>
  <li>Select a Colour</li>
  <li>Which then displays the Size options, relating to that colour in another Select Menu</li>
  <li>BUT also display the FIRST option value (from the Size Select Menu) somewhere else on the page every time you change a colour.</li>
  </ol>
  
  <p>This is the script I have:</p>
  
  <pre><code>    var $options= $('#product-multiple-2 option');
      $("#product-multiple-1").change(function(){
          // Change Image
          var pImage3 = "";
          $("#product-multiple-1 option:selected").each(function () {
              pImage3 = $(this).attr("data-product-image"); + " ";
              $(".product-code").html('');
              $("#product-multiple-container").fadeOut();
          });
          $("#slideshow-image").attr("src", pImage3);
          // Display Options
          $("#product-multiple-container").fadeIn();
          var matches = $options.filter('.'+$(this).val()).clone();
          $("#product-multiple-2").html(matches);
      });
  </code></pre>
  
  <p>And this is the HTML</p>
  
  <pre><code>            &lt;p class="product-code"&gt;&lt;/p&gt;
              &lt;li&gt;
              Colour Options
              &lt;select name="item_options[cf_product_option_colour]" id="product-multiple-1"&gt;
                  &lt;option&gt;Choose Option&lt;/option&gt;
                  &lt;option value="Red"&gt;Red&lt;/option&gt;
                  &lt;option value="Green"&gt;Green&lt;/option&gt;
                  &lt;option value="Blue"&gt;Blue&lt;/option&gt;
              &lt;/select&gt;
              &lt;/li&gt;
              &lt;li&gt;
              Size Options
              &lt;select name="item_options[cf_product_option_size]" id="product-multiple-2"&gt;
                  &lt;option&gt;Choose Option&lt;/option&gt;
                  &lt;option value="75643" class="Red"&gt;5ml - £1.00&lt;/option&gt;
                  &lt;option value="765432" class="Red"&gt;10ml - £2.00&lt;/option&gt;
                  &lt;option value="867564534" class="Red"&gt;15ml - £3.00&lt;/option&gt;
                  &lt;option value="5434" class="Red"&gt;20ml - £4.00&lt;/option&gt;
                  &lt;option value="6453234" class="Green"&gt;5ml - £1.00&lt;/option&gt;
                  &lt;option value="45256536" class="Green"&gt;10ml - £2.00&lt;/option&gt;
                  &lt;option value="52454" class="Green"&gt;15ml - £3.00&lt;/option&gt;
                  &lt;option value="6543754" class="Blue"&gt;5ml - £1.00&lt;/option&gt;
                  &lt;option value="4316243" class="Blue"&gt;10ml - £2.00&lt;/option&gt;
              &lt;/select&gt;
              &lt;/li&gt;
  </code></pre>
  
  <p>Note from my HTML, I have a class called "product-code" this is where I want to place the Value from the Size options.</p>
  
  <p>The problem im having, is if I use the <code>:first</code> selector. It throws me the first option from the list of options that were there previously. Not when they have been updated.</p>