Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

jQuery: Dynamically updating a drop down list

DZone's Guide to

jQuery: Dynamically updating a drop down list

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

We recently had a requirement to dynamically update a drop down list based on how the user had filled in other parts of the page.

Our initial approach was to populate the drop down with all potential options on page load and then add CSS selectors to the options that we wanted to hide. That worked fine in Chrome and Firefox but Internet Explorer seems to ignore CSS selectors inside a drop down list so none of the options were being hidden.

We therefore had to try and dynamically add and remove options from the drop down list instead.

The list that we initially loaded onto the page was like this:

<select id="foo" name="foo">
<option value="A" selected="selected">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="Not applicable">Not applicable</option>
</select>

Christian eventually came up with the following solution to hide/show those options and select the appropriate one after several hours of trial and error:

// captured on page load
var originalFooOptions = $("#foo > option");
var foo = $("#foo");
var dependentField = $("#fieldFooIsDependentOn");

if(notApplicable()) {
foo.children("option[value!='Not applicable']").remove();
foo.val("Not applicable");
} else {
foo.empty();
$(originalFooOptions).each(function() {
var newOption = $(this).clone();
if ($(this).val() === dependentField.val()) {
newOption.attr("selected", "selected");
}
newOption.appendTo(foo);
});
}

Another approach we tried was to try and dynamically update 'foo' rather than removing all the items and then adding them back.

Unfortunately we kept getting an 'unspecified error' on Internet Explorer 6 when we tried to set the selected value with that approach.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}