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.

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.

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:

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.

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.

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:

Once you understand the logic, the code won’t look as hard.

Still have questions? post them in the comments below!

Catalin

My name is Cătălin Berța and I'm a front-end web developer. I was born in Focsani, Romania and currently living in Bucharest. Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :) I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.

5 thoughts on “Populate a select dropdown list with jQuery

  1. This is an easy to use code to select records from MySQL database table and display in dropdown combo box using PHP.

    $cn=mysql_connect($db_host,$db_user,$db_password) or die(mysql_error());
    mysql_select_db($db_name,$cn) or die(mysql_error());
    $sql = “SELECT field_name FROM table_name”;
    $rs = mysql_query($sql) or die(mysql_error());
    echo “”;
    while($row = mysql_fetch_array($rs)){
    echo “”.$row[“field_name”].””;
    }mysql_free_result($rs);
    echo “”;

    Source:
    http://phphelp.co/2012/05/10/how-to-fill-

    a-dropdown-combo-box-in-php-from-mysql-database-table/

    OR

    http://addr.pk/a8cf

  2. Thanks for breaking this down to so well.
    I was able to understand this and implement it. However, i am trying to do the same by populating the 2 dropdown boxes from MySQL DB.
    Typically I would embed the PHP code in the HTML to fetch row data and display it. Can i do the same inside the javascript ? Whats the best possible approach to solve my problem?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">