CODEWITHSUNDEEP
jqueryselectdrop-down-menu
user1025744
user1025744

Reputation:

JQuery: Load second DDL dynamically when element of first DDL is selected

I am relatively new to JQuery and I have a webpage with a drop down list. When the user selects an element of the drop down list, a second drop down list depending on the choice of the first drop down list should be displayed. The contents of the drop down lists are known and constant and can thus be hardcoded on the page, no need to load something using an AJAX call. For example: 

<select id="country" name="country">
<option value="US">USA</option>
<option value="CA">Canada</option>
<option value="MEX">Mexico</option>
</select>

When user selects "USA": load second drop down list with US states.

When user selects "Canada": load second drop list with Canadian provinces

When user selects "Mexico": load second drop down list with Mexican provinces etc.

Although this looks like a very standard and basic requirement for a webpage I could only find code examples that use AJAX to load the contents of the second drop down list from a server. This made the code sample too complex, I am sure there is a far easier solution.

Upvotes: 0

Views: 403

Answers (3)

erimerturk
erimerturk

Reputation: 4288

check out this.

http://jsfiddle.net/qjgCY/1/

Upvotes: 1

Sergey
Sergey

Reputation: 8091

Only ajax is possible for this target. If you use .NET then you can use "cascade drop down list", but it also behind scene makes ajax requests.

Upvotes: 0

Dave G
Dave G

Reputation: 9777

Simplest solution I can think of would be to declare the elements you want to populate the second drop down with as a map (assoc array) stored as a javascript variable in the page.

Attach a change binding to the first, in that handler, update the second drop down.

Upvotes: 0

Related Questions