Apply to all 'Select option' issue
<p>I am trying to apply the selected option to other drop downs but am having an issue with the values being applied to all.</p>

<p>HTML:</p>

<pre><code>&lt;!-- Default drop --&gt;
&lt;select class="fldSizeSelect" id="" name=""&gt;
&lt;option value="option one"&gt;-&lt;/option&gt;
&lt;option value="option two"&gt;S&lt;/option&gt;
&lt;option value="option three"&gt;M&lt;/option&gt;
&lt;option value="option four"&gt;L&lt;/option&gt;
&lt;option value="option five"&gt;XL&lt;/option&gt;
&lt;/select&gt;

&lt;select class="fldSize" id="" name=""&gt;
&lt;option value=""&gt;-&lt;/option&gt;
&lt;option value="s"&gt;S&lt;/option&gt;
&lt;option value="m" selected="selected"&gt;M&lt;/option&gt;
&lt;option value="l"&gt;L&lt;/option&gt;
&lt;option value="xl"&gt;XL&lt;/option&gt;
&lt;/select&gt;

&lt;select class="fldSize" id="" name=""&gt;
&lt;option value=""&gt;-&lt;/option&gt;
&lt;option value="s"&gt;S&lt;/option&gt;
&lt;option value="m" selected="selected"&gt;M&lt;/option&gt;
&lt;option value="l"&gt;L&lt;/option&gt;
&lt;option value="xl"&gt;XL&lt;/option&gt;
&lt;/select&gt;

&lt;input type="button" value="Apply to all" class="selectedToAll" id="" name=""&gt;
</code></pre>

<p>Jquery:</p>

<pre><code>    $('.selectedToAll').click(function () {
        var position =  $('.fldSizeSelect option:selected').index();        
        $('.fldSize option').eq(position).attr('selected', 'selected');
    });
</code></pre>

<p>Currently if I make a selection from the top drop down and click select all it only applies the value to the 1st drop down with the class 'fldSize'. I tried using each() but no luck.</p>

<p>I originally got the value and applied to all but this was causing issues as the 1st option was overridden as well with the default value (so if 'M' was selected and applied to all the output for the below drop downs became - M, S, M, L, XL).</p>

<p>With the current method the correct option is applied but only to the 1st drop down not all. Any help is appreciated. </p>
