jQuery select tag IE8 issue - jquery-selectors

Question

I have two selects that initially render this way in both firefox and IE8:
<select id="cntctMap_PRSNL_TITL_TXT" >
<option value="Dr.">Dr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option selected="" value="Mr.">Mr.</option>
</select>
<select id="cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA"">
<option value="01">Focus</option>
<option value="02">Prospect</option>
<option value="03">Center Of Influence</option>
</select>
So far so good as only the first select has a value returned from the server-side, the second does not.
On document load I pull the html for the second select, i.e. $("#cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA").html());
In IE the returned string is:
<option selected value="01">Focus</option><option value="02">Prospect</option><option value="03">Center Of Influence</option>
Notice the 'selected' attribute
But in firefox it's:
<option value="01">Focus</option><option value="02">Prospect</option><option value="03">Center Of Influence</option>
The reason this is important to me is that I want to prepend an option, i.e.
$("#cntctMapCUST_SEGM_US_RETAIL_SALES_SMA").prepend(selectOption);
And have the prepended option value show in the dropdown box, but I only want to do this for those selects that don't have a server-side value.
In IE, I can't tell which is which since 'selected' comes back in all cases. This is also true if I use $("#cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA option:selected")); In IE, it always returns a 'selected' option.
Anyone know a way around this?

Answer 1

As discussed in the comments, I suggest adding a special class (e.g. has-default) to selects that have server-side values. This is done on the server-side when you render the tags.
<select id="cntctMap_PRSNL_TITL_TXT" class="has-default">
<option value="Dr.">Dr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option selected="" value="Mr.">Mr.</option>
</select>
<select id="cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA">
<option value="01">Focus</option>
<option value="02">Prospect</option>
<option value="03">Center Of Influence</option>
</select>
...
Using jQuery, you can target selects with server-side values:
$('select.has-default').prepend(selectOption);
The above statement will only prepend selectOption to selects that have the has-default class. This is more consistent because it doesn't rely on whether browsers mingle with the <option> tags.