set the selectedIndex of a DropDown using jQuery?
<p>i am trying to set the index of an dropdown to 0; if the user is uncheck the checkbox as show in the example but some how its just ignoring... </p>

<pre><code>$ddlHeader.attr('selectedIndex', 0);
</code></pre>

<p><a href="http://jsfiddle.net/abuhamzah/9YM4P/" rel="nofollow">http://jsfiddle.net/abuhamzah/9YM4P/</a></p>

<p>//html:</p>

<pre><code>Header:
&lt;br /&gt;&lt;input id="check" type="checkbox" name="approve" /&gt;
&lt;select id="myddl" name="myddl"&gt;
    &lt;option value="0"&gt;select me&lt;/option&gt;
    &lt;option value="1"&gt;One&lt;/option&gt;
    &lt;option value="2"&gt;Twooo&lt;/option&gt;
    &lt;option value="3"&gt;Three&lt;/option&gt;
&lt;/select&gt; 
</code></pre>

<p>​</p>

<p>//js</p>

<pre><code>var $ddls = $('select');
var $check = $('#check');
var $ddlHeader = $("#myddl"); 

$ddls.prop("disabled", true); 

$check .click(function() {
    $ddls.prop("disabled", true); 
    $ddlHeader.prop("disabled", !this.checked);
    $ddlHeader.attr('selectedIndex', 0);

});
</code></pre>
