i am using a simple piece of jquery to clear the contents of the select in a form, but in iE all versions, the select is not clearing. it is ok in FF, just not doing it in IE. can anyone see where i have gone wrong with this? i have posted the relevant part of the code. thanks

UPDATE:

what i am trying to achieve is when a form is submitted the inputs are cleared and the select/option returns to it default state like when the page was loaded.

Answer if it will help anyone else: $("select").prop('selectedIndex', 0);

/*Show submitted*/
//$(".done").show(500).slideUp(300).delay(800).fadeIn(400);
$(".done").html("<div id=\"boxSuccess\">Message sent successfully!</div><br />");
/*Clear input values*/
$("input").val("");
/*Clear slelect values*/
$("select").val("");
$(".done").fadeIn(4000).fadeOut(4000);

i am using a simple piece of jquery to clear the contents of the select in a form, but in iE all versions, the select is not clearing. it is ok in FF, just not doing it in IE. can anyone see where i have gone wrong with this? i have posted the relevant part of the code. thanks

UPDATE:

what i am trying to achieve is when a form is submitted the inputs are cleared and the select/option returns to it default state like when the page was loaded.

Answer if it will help anyone else: $("select").prop('selectedIndex', 0);

/*Show submitted*/
//$(".done").show(500).slideUp(300).delay(800).fadeIn(400);
$(".done").html("<div id=\"boxSuccess\">Message sent successfully!</div><br />");
/*Clear input values*/
$("input").val("");
/*Clear slelect values*/
$("select").val("");
$(".done").fadeIn(4000).fadeOut(4000);

• javascript
• jquery
• internet-explorer

• Is the empty string really the value of an <option> tag under the <select>? – Pointy Commented Jun 28, 2011 at 13:14
• @pointy sorry, do understand your ment? thanks – bollo Commented Jun 28, 2011 at 13:25
• Setting the <select> value to "" means, "make the <option> whose value is "" be the current selection." – Pointy Commented Jun 28, 2011 at 13:28

3 Answers 3

A single-selection <select> element can't really be "cleared"; some <option> in it must be showing. What you could do to make sure that (for example) the first option is showing is

$('select').get(0).selectedIndex = 0; // or $('select').prop('selectedIndex', 0);

edit — a look at the jQuery (1.5.2) source tells me that when the searched-for value can't be found as the value (or, if no "value" attribute, the text) of an option, then it sets the "selectedIndex" to -1. A quick jsfiddle should show what effect that has in IE.

edit again — a quick test suggests that IE doesn't pay attention to the "selectedIndex" being set to -1.

more Here is a relevant jQuery bug report. Personally I don't think it's really a bug in the case of a single-select dropdown. For a multi-select I could see an argument, though it's always possible to do:

$('select option').prop('selected', false);

to de-select everything in a multi-select. Doesn't work for a single-selection element however because, again, that doesn't really make sense. The element will always cause the value of one of its options to be submitted with the form, so it really can't be "cleared" unless one of the options has an empty value.

even more — If one of your options has the "defaultSelected" attribute (or property), then you could make it be the selected option with:

$('select option').each(function() {
  this.selected = this.defaultSelected;
});

Because you are setting the value on a collection of objects i think. I'd do it this way:

$("select").add("input").each(function(){
     $(this).val("");
});

instead of

/*Clear input values*/
$("input").val("");
/*Clear slelect values*/
$("select").val("");

This is valid (obviously) only if you have an option with value='' and this is what you want to reset the select to. Like

 <option value=''>Select a value</option>

$("select").val(""); should merely set as selected whichever item has "" as its value. If you want to actually remove the items, you want something like $("select option").remove();