显示下一个下拉列表
[英]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>
4 个解决方案
解决方案1
2 2018-07-05 16:48:20
尝试使用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>
解决方案2
1 已采纳 2018-07-05 16:48:29
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>
解决方案3
1 2018-07-05 16:51:39
添加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>
解决方案4
0 2018-07-05 17:39:25
通用方法
- 设置一个带有
<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.