Set a select by option value with optgroups
11,305
Simple jQuery answer:
var value = "foo";
$('#company-state option[value="' + value +'"]');
To "mark it as selected" you can add to the selector:
$('#company-state option[value="' + value +'"]').prop('selected', true);
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Author by
Admin
Updated on June 11, 2022Comments
-
Admin about 2 years
We do business in the US and Canada, so on a registration form I have a select that has optgroups to separate the US states from the Canadian provinces. I use the two character codes and store them in the database. When I want to edit the customer information, I want the same options available as on the registration form; however, I cannot seem to find the state or province by the value and then mark it selected.
Here is an example of the select:
<select id="company-state"> <option value="">Select One</option> <optgroup label="United States"> <option value="AK">Alaska</option> <option value="AL">Alabama</option> ... <option value="WV">West Virginia</option> <option value="WY">Wyoming</option> </optgroup> <optgroup label="Canada"> <option value="AB">Alberta</option> <option value="BC">British Columbia</option> ... <option value="SK">Saskatchewan</option> <option value="YT">Yukon Territory</option> </optgroup> </select>
I have tried numerous solutions, such as, trying to find the option by value or by ordinal and nothing seems to work.
-
Parag Kadam over 3 yearsThis won't work if the same option value exists in different optgroups. In that case, it will always choose the last option.