在第一個選擇框中選擇選項后更改選擇框選項
[英]Change select box options upon selecting option in first select box
問題描述
在我的JavaScript程序中，我創建了兩個選擇框，當選擇了選擇框的第一個選項時，我想在圖像選擇框中顯示3個圖像名稱的選擇。 當選擇第二個選項時，我想在圖像框中顯示對應的3個圖像名稱的選擇。 為此，我做了下面的編碼。 但它不起作用。 誰能幫我解決？
碼：
<!DOCTYPE html> <html> <head> <title>selectbox</title> <style> div.event { padding-left: 40%; padding-top: 5%; } #mySelect{ width: 60px; height: 50px; text-align: center; } </style> </head> <body> <form name="myForm"> <div class="event"> <select id="mySelect" multiple size="3" onchange="myFunction()"> <option value="name" disabled="disabled">Name</option> <option value="animals">Animals</option> <option value="flowers">Flowers</option> </select> <select id="mySelect2" multiple size="4"> <option disabled="disabled">Images</option> </select> </div> </form> <script> var selectbox2 = document.getElementById('mySelect2'); function myFunction() { if (document.getElementById('mySelect').value == "Animals"){ selectbox2.append('<option>Tiger</option>'); selectbox2.append('<option>Lion</option>'); selectbox2.append('<option>Bear</option>'); } else if (document.getElementById('mySelect').value == "Flowers"){ selectbox2.append('<option>Rose</option>'); selectbox2.append('<option>Lotus</option>'); selectbox2.append('<option>Lily</option>'); } } </script> </body> </html>
2 個解決方案
解決方案1
1 已采納 2017-10-19 20:46:09
您的第一個選擇值以小寫形式編寫，但是if測試正在測試是否為大寫。
其次， append()方法不是標准的，您應該使用.appendChild() 。 但是，無論使用哪種方法，都無法追加字符串。 對於字符串，必須設置.innerHTML屬性。
如果要使用.append()或.appendChild() ，則需要附加一個“ DOM節點”，可以這樣創建：
var option = document.create("option");
option.value = "something";
最后，請勿使用內聯HTML事件屬性（ onclick ， onchange等）。 為什么有很多原因 。 相反，您的所有JavaScript都應在JavaScript區域中工作，並遵循現代的事件處理標准（ .addEventListener() ）。
<!DOCTYPE html> <html> <head> <title>selectbox</title> <style> div.event { padding-left: 40%; padding-top: 5%; } #mySelect{ width: 60px; height: 50px; text-align: center; } </style> </head> <body> <form name="myForm"> <div class="event"> <select id="mySelect" multiple size="3"> <option value="name" disabled="disabled">Name</option> <option value="animals">Animals</option> <option value="flowers">Flowers</option> </select> <select id="mySelect2" multiple size="4"> <option disabled="disabled">Images</option> </select> </div> </form> <script> // Get a reference to the first drop down: var selectbox1 = document.getElementById('mySelect'); // Set up the event handling for the first select: selectbox1.addEventListener("change", myFunction); var selectbox2 = document.getElementById('mySelect2'); function myFunction() { if (document.getElementById('mySelect').value == "animals"){ selectbox2.innerHTML = '<option disabled="disabled">Images</option><option>Tiger</option><option>Lion</option><option>Bear</option>'; } else if (document.getElementById('mySelect').value == "flowers"){ selectbox2.innerHTML = '<option disabled="disabled">Images</option><option>Rose</option><option>Lotus</option><option>Lily</option>'; } } </script> </body> </html>
解決方案2
1 2017-10-19 21:17:02
這可能對您有幫助。 我剛剛添加了一些簡單的功能。
<!DOCTYPE html> <html> <head> <title>selectbox</title> <style> div.event { padding-left: 40%; padding-top: 5%; } #mySelect { width: 60px; height: 50px; text-align: center; } </style> </head> <body> <form name="myForm"> <div class="event"> <select id="mySelect" multiple size="3" onchange="myFunction()"> <option value="name" disabled="disabled">Name</option> <option value="animals">Animals</option> <option value="flowers">Flowers</option> </select> <select id="mySelect2" multiple size="4"> <option disabled="disabled">Images</option> </select> </div> </form> <script> var selectbox2 = document.getElementById('mySelect2'); function myFunction() { if (document.getElementById('mySelect').value == "animals") { selectbox2.options.length = 1; let tiger = document.createElement('option'); tiger.text = 'Tiger'; selectbox2.add(tiger); let lion = document.createElement('option'); lion.text = 'Lion'; selectbox2.add(lion); let bear = document.createElement('option'); bear.text = 'Bear'; selectbox2.add(bear); } else if (document.getElementById('mySelect').value == "flowers") { selectbox2.options.length = 1; let rose = document.createElement('option'); rose.text = 'Rose'; selectbox2.add(rose); let lotas = document.createElement('option'); lotas.text = 'Lotas'; selectbox2.add(lotas); let lilly = document.createElement('option'); lilly.text = 'Lilly'; selectbox2.add(lilly); } } </script> </body> </html>
通過jQuery附加選項后如何在選擇框中選擇第一個選項
[英]How to select first option in a select box after appending options by jquery
Select2 Change事件-在第一次select2框值更改時更改下一個select2框的選項
[英]Select2 Change Event - Change the options for next select2 box on first select2 box value change
使用jQuery更改選擇框選項更改時的輸入框占位符
[英]Change input box placeholder upon select box option change using jQuery
Javascript SELECT BOX選項取決於所選的其他SELECT BOX選項
[英]Javascript SELECT BOX options dependent on other SELECT BOX option selected
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.