Change Drop Down Menu Based on Another Drop Down Selection Using jQuery | Code Snippet #16

23 Jan , 2014  Code Snippets 

Change-Dropdown-Using-jQuery-Code-SnippetCode Snippet #16: The code we discovered today can change drop down menu based on another drop down selection with the help of jQuery. Changing the value of drop downs using jQuery.

Drop downs are an integral part of forms. Drop downs are helpful and necessary to handle large list of data. Creating dynamic drop downs based on user selection is a helpful tool for web owners. Today, we are going to look at how to change the drop down selections based on another drop down selection with the help of jQuery.

You may also be interested in these code snippets on drop downs:

jQuery scripts can be used to change these dynamic drop down from no where. jQuery inserts the HTMLs dynamically on the webpage.

Here is demo shown below(Change the drop downs to see dynamic changing of the drop downs):

HTML:

jQuery Script:

Explanation:

In the above jQuery script, the user first creates a 3D array by name ‘data‘, where all the drop down values are added. Here we have taken two brands in the drop down namely Nokia and Samsung. The second drop down has the two fields, whether smartphone or budget phone of these two brands. Finally the models are displayed in the last drop down. These values are added to the array as shown below:

Then, we declare the drop downs as shown below:

We then add the option fields to the drop downs using for loop.

When the first drop down with name “a” encounters a change event, then the following code is executed which clears the options from the second drop down and adds the new values/options from the array to the second drop down using the codebelow:

Similarly, we initiate change event on the second drop down. When the user changes drop downs in the second drop down, the third drop down is dynamically changed using the below drop down.

Similarly, you can add change event for the third drop down. To do that, you need to increase the array values to one more level. This code can be modified to increase to increase the drop downs as per your needs. According the code should be changed in the script.

Hope you enjoyed this tutorial. If you have any doubts or clarifications in the script. Please let us know by commenting below.



, , ,

  • Hey Suraj, which browser you are using?

  • vishal

    How can I get the selected value of a,b,c for inserting them MySQL database? Quick Reply is expected.

    Thank you in advance

    • You can easily get by:
      $(‘#a’).val(); //Selected value

      • vishal

        thank you for your reply, I have a query how can your 3 level drop down to 2 level drop down as you are using object which is storing 2D array? Need your guidance

        • Here, Samsung is storing two values that is Smart Phones and Budget Phones. Similarily, Smart Phones is storing values such as Galaxy S4, Galaxy Note 2, Galaxy S3, Galaxy Tab 3.
          These things can be changed and modified to your needs. We have used the .prop() in the for loop to get the values.