Question

I have built a form using 3 select boxes that are used dynamically together, when one is in use the other must be at the default setting this ensures that any of the dynamic events for that select box are turned off, I accomplish this so far by using this jquery:

$('form select').click(function() {
    $('form select').not(this).val('');
});

This does what I want in all other browsers except IE.

In other browsers it returns the other select inputs to the top most option of the select meaning the only select box in action is the one selected. But, in IE it actually does delete the option altogether leaving me with an empty select box until it is clicked!

Is there a way around this?

Answer 1

Set selectedIndex to 0 instead of clearing the value:

$('form select').not(this).prop('selectedIndex', 0);