遞歸onchange事件未觸發
[英]recursive onchange event not triggered
問題描述
我有這段代碼，我想在更改第一個下拉列表后更新所有下拉列表。 但是當我使用onchange時，僅更新了一個下拉列表。 例如，我更改了第一個下拉菜單，僅更新了第二個下拉菜單，即使我也已經在第二個下拉菜單上放置了onchange事件，但它不起作用。
這是代碼。 謝謝您的幫助。
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 個解決方案
解決方案1
0 2015-07-24 09:25:24
onchange或其他事件不會從使用代碼設置元素的值中觸發，而是從瀏覽器中的真實（用戶）事件觸發。 您將必須手動觸發這些事件，手動更新其他兩個選擇或為此找到一些jquery代碼。
解決方案2
0 2015-07-24 09:27:23
根據要更改的表單元素的類型以及用戶與該元素進行交互的方式，更改事件在另一個時刻觸發：
- 和激活元素（通過單擊或使用鍵盤）時。
- 當用戶明確地提交更改時（例如，通過鼠標單擊從的下拉列表中選擇一個值，通過選擇
通過選擇文件從日期選擇器中選擇日期
在的文件選擇器中，等等）；- 當元素在更改其值后失去焦點但未提交時（例如，在編輯或鍵入=“ text”>的值之后）。
因此，使用javascript更改值不會觸發該change事件。 但是您仍然可以創建一個更改事件，然后從目標中觸發它。
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>
未觸發OnChange事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.