Question

All,
I have the following bit of HTML code for a select box:

<select name="display_dj_entries" id="display_dj_entries">
<option value="original">Select a DJ</option>
<option value="1">1</option>
</select>

I’m trying to set this value back to the original value when another select box is changed on my page. I have the following jQuery to do this:

jQuery(document).on('change','#display_gear_entries',function(event){
    var selected_value = jQuery(this).val();
    jQuery("#display_dj_entries option[value='original']").attr("selected", "selected");
});

It isn’t setting the value back to the original value but instead leaving it set to the value of 1. What am I doing wrong on this?

Thanks!

Answer 1

Try this:

jQuery("#display_dj_entries").prop("selectedIndex", 0);

DEMO