How to reselect a default option in a select box on the fly with jquery

November 09, 2010

How to reselect a option on the fly in a select element using jquery.

This always annoys me a little bit as I seem to have a tendancy to forget the solution, so I thought i'd just blog it this time round for future reference and hopefully it might also help someone else.

What I need it for quite often is setting a select box back to the default when using the select box to repopulate other elements on the page ie using the .change() function on the select box element.

Normally my solution for resetting it now is just this.

$("#elementID option[selected]").removeAttr("selected");

This will just set the focus back to the selected="selected" element in the original html. Of course you could extend this somewhat further and perhaps actually set a new one if your list is not populated dynamically like so.

$("#elementID option[value='Today']").attr("selected","selected");

Hopefully this will be useful.

About me

Hello! I'm David Heward, how are you going? I'm a Senior Devops/Build Engineer, specialising in AWS & Cloud Automation. Based in London. Strong 10+ year background in Software development. Have a read of my blog. Have a look at some of my working projects. Contact me at @davehewy or on Linkedin.