Question

I would like to ‘toggle’ the list of options in a select box.

I have the two sets of options as strings (American states and Canadian Provinces). However, I notice that in the DOM, the select object has no ‘innerhtml’ property (at least not according to w3schools).

Do I have to go and remove and replace the options one by one? How do I do this?

Answer 1

Making use of jQuery, I usually do something like this:

var html = '[your html string with all the options elements]';
$('#mySelectId').empty();
$('#mySelectId').append(html);

As for the one-by-one idea, make sure you keep in mind the general slowness of DOM interaction. Wholesale replacement with the entire string is going to be pretty quick, but if you manipulate the DOM for each element in the select then expect it to be slow.