Home

I've been working on a shopping cart site recently, and one of tasks I had to do was selecting specific options in dropdowns and radio buttons on the fly, so I used jQuery since I thought it was about time. I looked up a number of ways of achieving this, normally conflicting, so I thought I'd document the methods that worked for me.

Setting 'selected' for dropdowns with jQuery

$('select[name=dropdown]').val('11');

At first what I tried to do was access the child option tags in the select, use attr() to add a selected attribute to the specified option, but I had no luck. Upon further research, it turned out I could use the val() method to achieve this. What I'm actually passing the value of the value attribute of the option I want to be selected. In the case below, this would be the third option:

<select name="dropdown">
<option value="123">Option One</option>
<option value="apple">Option Two</option>
<option value="11>Option Three</option>
</select>

Setting checked for radio buttons

Radio buttons were a little different. At first I tried to use the same val() and selector structure, but of course with radio buttons, they all have the same name attribute. So what I did was this:

$('input[name=radio]:checked').removeAttr('checked');
$('input[name=radio]:eq(1)').attr('checked','checked');

First, search for all checked radio buttons with that name and uncheck them. Second, give the the nth radio button (using the :eq selector) a checked="checked" attribute with the attr() method. The difference here is that you need to know the position/index of the radio button you want to check out of all the radio buttons of that name, rather than just the value of the radio button.

Sitenote: Square brackets in the name attribute

As a note on the side, on the shopping cart site I'm building, the options fields for each product are created dynamically, such as name="options[3]". I tried to access the element with this code:

$('select[name=options[3]]');

The jQuery selector throws an error, since the square brackets are already being used to house the name attribute. To change the field name would have involved immense editing of the shopping cart software I was using, so had to work around the selector. Turns out I could use quotes around the name value, and voila! Sorted!

$('select[name="options[3]"]');

Hope some of this helps!