Dropdown events on options data changed

Question

I have a question about dropdown events. Assume I have two dropdowns, when the option of the first dropdown is changed, all the options of the second dropdown are replaced with other. For example, assume the first dropdown holds the following options:

Car
Bike

Now, if I select the option Car, the second dropdown will contain the following options:

Ford
Toyota

while if I select the option Bike, the second dropdown will contain the following options:

Harley Davidson
Ducati

Is there an event that can be used to detect the refresh of the options for the second dropdown?

Thank you

Are you looking for cascading dropdowns? There are a lot of samples available for the same, my random search gave me this - http://stackoverflow.com/questions/18351921/how-to-populate-a-cascading-dropdown-with-jquery — ArunGeorge, Jul 05 '16 at 11:31
Not exactly. What I need to do is to make the first dropdown fire the same ajax of the second. But actually I need also to fire an ajax in the first dropdown to update the content of the second. In the end I should do 2 ajax calls in the first dropdown. — Luca Dotti, Jul 05 '16 at 18:27

score 0 · Answer 1 · edited May 23 '17 at 12:33

0

No such basic event exist. If it really needs - you can create your own event, triggered when changes second select and listen it.

Not realy clear but full docs: https://developer.mozilla.org/en-US/docs/Web/API/Event

Clear, but very short: JavaScript custom Event Listener

But i think that more preferable way is listen change of first select and on this event look at the html of second select.

edited May 23 '17 at 12:33

Community

1
1

answered Jul 05 '16 at 11:30

Teo

230
3
14

Thanks for the reply. The fact is that the second dropdown fire an ajax onChange event. What I want to do is to fire the same ajax when an onChange event is detected is the first dropdown. In the example assume that the second dropdown ajax will return the number of wheels. Assume that currently the first dropdown is set to Bike. Now, I change it to Car and automatically the first option of the second dropdown is set ('Ford'). In addition to that, the ajax must be call automatically when the first option is automatically selected, returning 4 as number of wheels. – Luca Dotti Jul 05 '16 at 11:42

score 0 · Answer 2 · edited May 23 '17 at 11:52

I am assuming you have dropdowns as shown below

 <select id="vehichleDropdown" onchange="onVehichleDropdownChange()">
 ....
 <select id="makeDropdown" onchange="onMakeDropdownChange()">
 ....

And you have implemented onVehichleDropdownChange() and onMakeDropdownChange() in your javascript to make ajax calls to perform actions. If you have this setup, when you change the first dropdown, the second dropdown's value will change. You can fire the onChange event of the second dropdown in a number ways as described here - How can I trigger an onchange event manually?

I have set up a working fiddle here for your reference - https://jsfiddle.net/t2tak52f/1/

Something like this

onVehichleDropdownChange = function() {
....... //logic to populate second dropdown
makeDropdown.onchange();
}

Dropdown events on options data changed

2 Answers2