[英]Show next drop-down list
我試圖創建一個javascript函數,以便在下拉菜單中選擇任何選項時,將顯示下一個下拉菜單。 我將此功能添加到每個選項值中,因此,如果要選擇任何選項,則會出現下一個下拉菜單-我追求的功能。 但是,當用戶從下拉列表中進行選擇時,什么也不會發生。 任何幫助,將不勝感激。
function hide() { document.getElementById("t1").style.display = "none"; document.getElementById("t2").style.display = "none"; } function onClick1() { document.getElementById("t1").style.display = "block"; } function onClick2() { document.getElementById("t2").style.display = "block"; }
<body onload="hide()"> <table> <tr> <td> <select> <option value="" disabled selected>Title</option> <option value="clean" onclick="onClick1()">Clean</option> <option value="salvage" onclick="onClick1()">Salvage</option> <option value="rebuilt" onclick="onClick1()">Rebuilt</option> </select> </td> <td> <select id="t1"> <option value="" disabled selected>Title Status</option> <option value="in hand" onclick="onClick2()">In Hand</option> <option value="lien" onclick="onClick2()">Lien</option> <option value="missing" onclick="onClick2()">Missing</option> </select> </td> <td> <select id="t2"> <option value="" disabled selected>Title Stat</option> <option value="in hand">In Hand</option> <option value="lien">Lien</option> <option value="missing">Missing</option> <option value="ralph jr.">Missing</option> <option value="ralph">Missing</option> </select> </td> </tr> </table> </body>
嘗試使用onchange
而不是onclick
。 您可以在下面查看。
<!DOCTYPE html> <html> <head> <title>Experiment</title> <script> function hide() { document.getElementById("t1").style.display = "none"; document.getElementById("t2").style.display = "none"; } function onClick1(){ document.getElementById("t1").style.display = "block"; } function onClick2(){ document.getElementById("t2").style.display = "block"; } </script> <style type="text/css"> </style> </head> <body onload="hide()"> <table> <tr> <td> <select onchange="onClick1()"> <option value="" disabled selected>Title</option> <option value="clean">Clean</option> <option value="salvage">Salvage</option> <option value="rebuilt">Rebuilt</option> </select> </td> <td > <select id="t1" onchange="onClick2()"> <option value="" disabled selected>Title Status</option> <option value="in hand">In Hand</option> <option value="lien">Lien</option> <option value="missing">Missing</option> </select> </td> <td> <select id="t2"> <option value="" disabled selected>Title Stat</option> <option value="in hand">In Hand</option> <option value="lien">Lien</option> <option value="missing">Missing</option> <option value="ralph jr.">Missing</option> <option value="ralph">Missing</option> </select> </td> </tr> </table> </body> </html>
option
標記上的onclick
事件將在大多數版本的IE,Safari和Chrome上失敗:
從選項中刪除onClick
。應該由選擇框上的onChange
事件處理。
如果要傳遞所選選項的值,則只需傳遞this.value
嘗試這個
<!DOCTYPE html> <html> <head> <title>Experiment</title> <script> function hide() { document.getElementById("t1").style.display = "none"; document.getElementById("t2").style.display = "none"; } function onClick1(value){ console.log(value); document.getElementById("t1").style.display = "block"; } function onClick2(){ document.getElementById("t2").style.display = "block"; } </script> <style type="text/css"> </style> </head> <body onload="hide()"> <table> <tr> <td> <select onchange="onClick1(this.value)"> <option value="" disabled selected>Title</option> <option value="clean" >Clean</option> <option value="salvage" >Salvage</option> <option value="rebuilt" >Rebuilt</option> </select> </td> <td > <select id="t1" onchange="onClick2()"> <option value="" disabled selected>Title Status</option> <option value="in hand" >In Hand</option> <option value="lien" >Lien</option> <option value="missing">Missing</option> </select> </td> <td > <select id="t2"> <option value="" disabled selected>Title Stat</option> <option value="in hand">In Hand</option> <option value="lien">Lien</option> <option value="missing">Missing</option> <option value="ralph jr.">Missing</option> <option value="ralph">Missing</option> </select> </td> </tr> </table> </body> </html>
添加onchange
事件處理程序以選擇標簽,而不是onclick
到每個選項
function hide() { document.getElementById("t1").style.display = "none"; document.getElementById("t2").style.display = "none"; } function onClick1() { document.getElementById("t1").style.display = "block"; } function onClick2() { document.getElementById("t2").style.display = "block"; }
<body onload="hide()"> <table> <tr> <td> <select onchange="onClick1()"> <option value="" disabled selected>Title</option> <option value="clean">Clean</option> <option value="salvage">Salvage</option> <option value="rebuilt">Rebuilt</option> </select> </td> <td> <select id="t1" onchange="onClick2()"> <option value="" disabled selected>Title Status</option> <option value="in hand">In Hand</option> <option value="lien">Lien</option> <option value="missing">Missing</option> </select> </td> <td> <select id="t2"> <option value="" disabled selected>Title Stat</option> <option value="in hand">In Hand</option> <option value="lien">Lien</option> <option value="missing">Missing</option> <option value="ralph jr.">Missing</option> <option value="ralph">Missing</option> </select> </td> </tr> </table>
<select>
id的數組。 <select>
的函數。 在函數中使用classList .hide ()。 <select>
。 var ids = ["t1", "t2", "t3", "t4"]; function El(id) { return document.getElementById(id); } function showNext(ids, id) { var i = ids.indexOf(id); // If i is not the last one if (i !== ids.length - 1) { var el = El(ids[i + 1]); // Remove CSS class 'hide' el.classList.remove("hide"); } } function init() { // Add an event listener to each element. for (var i = 0; i < ids.length; i += 1) { var el = El(ids[i]); el.addEventListener("change", function() { // Show next element from current showNext(ids, this.id); }); } } init();
.hide { display: none; }
<table> <tr> <td> <select id="t1"> <option value="" disabled selected>Title</option> <option value="clean">Clean</option> <option value="salvage">Salvage</option> <option value="rebuilt">Rebuilt</option> </select> </td> <td> <select id="t2" class="hide"> <option value="" disabled selected>Title Status</option> <option value="in hand">In Hand</option> <option value="lien">Lien</option> <option value="missing">Missing</option> </select> </td> <td> <select id="t3" class="hide"> <option value="" disabled selected>Title Stat</option> <option value="in hand">In Hand</option> <option value="lien">Lien</option> <option value="missing">Missing</option> <option value="ralph jr.">Missing</option> <option value="ralph">Missing</option> </select> </td> <td> <select id="t4" class="hide"> <option value="" disabled selected>Title Stat</option> <option value="in hand">In Hand</option> <option value="lien">Lien</option> <option value="missing">Missing</option> <option value="ralph jr.">Missing</option> <option value="ralph">Missing</option> </select> </td> </tr> </table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.