Skip to Content

Selective Population in DropdownListBox using JavaScript


This Blog explains how to populate one dropdown based on the selected value in another dropdown using Javascript.


Scripting is done to do some functions like validation on client-side itself. Some of us would have come across such a situation where we want to populate a dropdown dynamically on the client side itself. This can be done through JavaScripts.

To learn about JavaScript API, refer to JavaScript API

How to populate one dropdown based on selection in another dropdown?

This blog will solve some of the basic doubts which are quite frequent in SDN forums and will be very useful for beginners to learn how to do scripting in htmlb.

We know two methods mentioned in Javascript API for the selected entry in dropdownListBox.


getValue() :

To get the key of the currently selected entry.


getIndex() :

To get the index of the currently selected entry.

What is new with this blog?

We can also get the value or the text of the selected entry. This is not given in the JavaScript API.

getText()  :

To get the value/text of the currently selected entry.

This can be used in many situations where some validation of data is to be done and value of the dropdown is needed.


In my scenario, I have taken two dropdownListBox, country and state.

Based on the selected country in the first dropdown, states will be loaded in the second dropdown.


When a country is selected in the COUNTRY dropdown, states are populated in the second dropdown.



Now check out the code here.

Check out the code and give your valuable comments.

You must be Logged on to comment or reply to a post.