IE Problem with modifying <select>/<option>
I wrote a script in jQuery to clairify a <select> list for persons on a website.
The list is a T-Shirt size selection, from Men's and Ladies sizing. The idea was, when selecting a size, the Men's/Ladies sizes would be separated by <optgroup>, but once you select one, you can't see which group the option is in. Thus, if it says Large, you might say "Men's or Ladies Large?"
Therefore, the script I wrote is supposed to add "Men's" or "Ladies" to the selection you make, and clear it when you open up the list to make another selection (to prevent clutter).
The script works find in FF 3.5, but in IE 8, trying to open the drop-down it just closes itself right away.
Page viewable at:
http://hogweb.theunitedfrontclan.com/onlineregistration
HTML:
-
<select name="hog[shirt]" id="tshirtsize">
<option selected="selected">------- Select One -------</option>
<optgroup label="Men's">
<option value="MS">Small</option>
<option value="MM">Medium</option>
<option value="ML">Large</option>
<option value="MXL">X-Large</option>
<option value="M2XL">XX-Large</option>
<option value="M3XL">XXX-Large</option>
</optgroup>
<optgroup label="Ladies">
<option value="LS">Small</option>
<option value="LM">Medium</option>
<option value="LL">Large</option>
<option value="LXL">X-Large</option>
<option value="L1X">1X</option>
</optgroup>
</select>
JS:
-
var tshirtsize_changed = false;
var tshirtsize_val;
$(function () {
$("#tshirtsize").click(function () {
if ($(this).val() == tshirtsize_val)
{ $(this).change(); }
else if (!tshirtsize_changed)
{
tshirtsize_val = $(this).val(); //FIX: selecting same option doesn't execute the change event.
$(this).find("option").not(":first").each(function () {
$(this).html($(this).html().substr($(this).html().indexOf(" ")+1));
});
}
}).change(function () {
$(this).find("option:selected:not(:contains(Select One))").prepend(" ").prepend($(this).find("option:selected").parent().attr("label"));
tshirtsize_changed = true;
var t = setTimeout("tshirtsize_changed = false",100); //FIX: Selecting an option triggers the click event.
tshirtsize_val = "";
}).change();
});