Dynamic Select

Easily load and reload options in a select using the Dynamic Select plugin.

Working example

The select has only one option to start with. Click the “Load Options” button to populate.

Markup

Markup is extremely simple. Any select will do. You’ll want to give it at least one default option though so your XHTML will be valid.

<select id="MySelect">
    <option value=""></option>
</select>

JavaScript

Just call .dynamicSelect() on the select, optionally passing an options object as described under “Options.”

$("#MySelect").dynamicSelect();

Updating

To update the select, use the dynamicSelect() method, and pass "update" as the first argument and an array of menu items as the second. Here is an example demonstrating the required schema for the menu items array.

var options = [
	{ label: "Homer", value: "1" },
	{ label: "Marge", value: "2" },
	{ label: "Bart", value: "3" },
	{ label: "Lisa", value: "4" },
	{ label: "Maggie", value: "5" },
	{ label: "An optgroup", value: [
		{ label: "Lenny", value: "6" },
		{ label: "Karl", value: "7" },
	]}
];

$("#MySelect").dynamicSelect("update", options);

Filtering the Update

Great, but what if my data isn’t in this format? When you setup the dynamicSelect, you can set a filter option to specify a function used to process the data. Any time you call .dynamicSelect("update", data), the data argument is passed to the filter function, and the result it passed to the updatemethod.

Options

The dynamicSelect() method accepts an optional argument for overriding options.

Download

jquery.dynamic-select.js
jquery.dynamic-select.min.js