Populate a select dropdown list with jQuery

It’s common to meet situations where you want a dropdown list to be updated depending on a visitor’s input.

Let’s say we have a contact form and we want to list contact names according to the department the visitor selects. Namely, in our case, we’ll have different contact names for the ‘sales’ and ‘support’ departments.

<form>
<select name="dep">
<option>Department</option>
<option>Sales</option>
<option>Support</option>
</select>
<select name="cname">
<option>Contact name</option>
</select>
</form>

Preview

Download

Both select fields have a ‘name’ attribute, so we can find and select them with jQuery. The logic of the functions we’ll build is pretty simple:
IF the ‘Sales’ option is selected, then add ‘some names’ to the second select input, and the same goes for the other departments.
So let’s get right on it!

We’ll build all of our code inside a jQuery ready function so the code will only be run after the entire HTML elements (the DOM) have finished loading.

$(document).ready(function() {

// code here

});

To avoid making jQuery go through the DOM over and over again when we’ll fetch our select inputs, we’ll add the selects to variables:

$(document).ready(function() {

$department = $("select[name='dep']");
$cname = $("select[name='cname']");

});

From now on, whether we’ll use $(“select[name='dep']“) or $department, it will mean the same thing, difference is though, jQuery will no longer traverse the document again with $department, it will just know where that element is. This is very important for larger scripts that may slow down a web page.

Now that we’ve added our select inputs to variables, we’ll use jQuery’s onChange function to detect when our department current selection changes.

$(document).ready(function() {
$department = $("select[name='dep']");
$cname = $("select[name='cname']");

$department.change(function() {

// code here

});
});

We have our onChange function, now it’s just a matter of a few if-and-else conditions to know when a certain department is selected, so let’s start with the ‘Sales’ department.

$(document).ready(function() {
$department = $("select[name='dep']");
$cname = $("select[name='cname']");

$department.change(function() {

//if the value from department selection is ‘Sales’ then…
if ($(this).val() == "Sales") {
$("select[name='cname'] option").remove(); //remove all options from Contact names
$("<option>John Smith</option>").appendTo($cname); //add an option to Contact names
$("<option>Marry Jones</option>").appendTo($cname); //add an option to Contact names
}

});
});

I believe the code is pretty self-explanatory, we’ve checked if the selected option from ‘department’ is ‘Sales’ and removed all options from the second selection and added two new names. The very same if-and-else condition will go for the rest of the departments.

Final code:

$(document).ready(function() {
$department = $("select[name='dep']");
$cname = $("select[name='cname']");

$department.change(function() {

if ($(this).val() == "Sales") {
$("select[name='cname'] option").remove();
$("<option>John Smith</option>").appendTo($cname);
$("<option>Marry Jones</option>").appendTo($cname);
}

if ($(this).val() == "Support")
{
$("select[name='cname'] option").remove();
$("<option>Jessy McBeth</option>").appendTo($cname);
$("<option>Bob Smith</option>").appendTo($cname);
}

if ($(this).val() == "Department")
{
$("select[name='cname'] option").remove();
$("<option>Contact name</option>").appendTo($cname);
}

});
});