recursive onchange event not triggered
Question
I have this code, I want to make all dropdowns to be updated once I change the first dropdown. But when I used onchange, only one dropdown updated. For example I change the first dropdown, only 2nd dropdown updated, even I already place onchange event on 2nd dropdown too but it doesn't work.
Here's the code. Thank you for your help.
function myFunction0() { var x = document.getElementById("mySelect0").value; document.getElementById("mySelect1").value = 'BMW'; document.getElementById("demo").innerHTML = "You selected: " + x; } function myFunction1() { var x = document.getElementById("mySelect1").value; document.getElementById("mySelect2").value = 'Mercedes'; document.getElementById("demo").innerHTML = "You selected: " + x; } function myFunction2() { var x = document.getElementById("mySelect0").value; document.getElementById("demo").innerHTML = "You selected: " + x; }
<!DOCTYPE html> <html> <body> <p>Select a new car from the list.</p> 1 <select id="mySelect0" onchange="myFunction0()"> <option value="Audi">Audi <option value="BMW">BMW <option value="Mercedes">Mercedes <option value="Volvo">Volvo </select> 2 <select id="mySelect1" onchange="myFunction1()"> <option value="Audi">Audi <option value="BMW">BMW <option value="Mercedes">Mercedes <option value="Volvo">Volvo </select> 3 <select id="mySelect2"> <option value="Audi">Audi <option value="BMW">BMW <option value="Mercedes">Mercedes <option value="Volvo">Volvo </select> <p>When you select a new car, a function is triggered which outputs the value of the selected car.</p> <p id="demo"></p> </body> </html>
2 answers
solution1
0 2015-07-24 09:25:24
onchange or other events don't trigger from setting the value of an element with code, they trigger from a real (user) event in the browser. You'll have to manually trigger those events, manually update the other 2 selects, or find some jquery code for it.
solution2
0 2015-07-24 09:27:23
From MDN Event.change
Depending on the kind of form element being changed and the way the user interacts with the element, the change event fires at a different moment:
- When the element is activated (by clicking or using the keyboard) for and ;
- When the user commits the change explicitly (eg by selecting a value from a 's dropdown with a mouse click, by selecting a
date from a date picker for , by selecting a file
in the file picker for , etc.);- When the element loses focus after its value was changed, but not commited (eg after editing the value of or type="text">).
So use javascript to change the value won't trigger that change event. But you can still create a change event then trigger it from the target.
function myFunction0() { var x = document.getElementById("mySelect0").value; document.getElementById("mySelect1").value = 'BMW'; document.getElementById("demo").innerHTML = "You selected: " + x; // Trigger change event on mySelect1 document.getElementById("mySelect1").dispatchEvent(new Event('change')); } function myFunction1() { var x = document.getElementById("mySelect1").value; document.getElementById("mySelect2").value = 'Mercedes'; document.getElementById("demo").innerHTML = "You selected: " + x; // Trigger change event on mySelect2 document.getElementById("mySelect2").dispatchEvent(new Event('change')); } function myFunction2() { console.log(x); var x = document.getElementById("mySelect0").value; document.getElementById("demo").innerHTML = "You selected: " + x; }
<!DOCTYPE html> <html> <body> <p>Select a new car from the list.</p> 1 <select id="mySelect0" onchange="myFunction0()"> <option value="Audi">Audi <option value="BMW">BMW <option value="Mercedes">Mercedes <option value="Volvo">Volvo </select> 2 <select id="mySelect1" onchange="myFunction1()"> <option value="Audi">Audi <option value="BMW">BMW <option value="Mercedes">Mercedes <option value="Volvo">Volvo </select> 3 <select id="mySelect2" onchange="myFunction2()"> <option value="Audi">Audi <option value="BMW">BMW <option value="Mercedes">Mercedes <option value="Volvo">Volvo </select> <p>When you select a new car, a function is triggered which outputs the value of the selected car.</p> <p id="demo"></p> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.