jquery: select a Select option by value
<p>I have the following (=>) <a href="http://jsfiddle.net/radi8/kjdwF/" rel="nofollow">Fiddle</a>. What it does is search for a Select Option by value and then set the attribute of the found option as selected. Pretty simple. This script (replicated below) works fine in IE 9 and FireFox 17, but not in Chrome OR Safari. These 2 browsers fail to set the attribute as selected. </p>

<p>Am I missing something here?</p>

<p><strong>EDIT: it looks like I needed to use .prop() rather than .attr().</strong> </p>

<p>The Select HTML:</p>

<pre><code>&lt;select id="listmcu"&gt;
    &lt;option value="1002"&gt;PA&lt;/option&gt;
    &lt;option value="1003"&gt;CA&lt;/option&gt;
    &lt;option value="1004"&gt;OR&lt;/option&gt;
    &lt;option value="1005"&gt;FL&lt;/option&gt;
    &lt;option value="1006"&gt;TX&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>The JQuery;</p>

<pre><code>$(function () {
    var mcu = "1005";
     alert ('Begin: mcu val = ' + mcu);
    //$("#listmcu").find("option:contains('" + mcu + "')").each(function () {
    $("#listmcu").find("option[value='" + mcu + "']").each(function () {
        alert ('In contains: this val = ' + $(this).val());
        if ($(this).val() == mcu) {
            //$(this).attr("selected", "selected");
            $(this).prop("selected", "selected"); // &lt;== appears to work
        }
    });
});
</code></pre>
