堆栈内存溢出
  简体   繁体   English

显示下一个下拉列表

[英]Show next drop-down list

 原文  2018-07-05 16:43:23  9   4    javascript/ html/ drop-down-menu

问题描述

I am trying to create a javascript function so when any option is selected in a drop down, the next drop down appears. 我试图创建一个javascript函数，以便在下拉菜单中选择任何选项时，将显示下一个下拉菜单。 I added this function to each option value, so if any option were to be selected the next drop down would appear - the functionality I am after. 我将此功能添加到每个选项值中，因此，如果要选择任何选项，则会出现下一个下拉菜单-我追求的功能。 However, nothing occurs when a user makes a selection from the drop down. 但是，当用户从下拉列表中进行选择时，什么也不会发生。 Any help would be appreciated. 任何帮助，将不胜感激。 

 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

Try using onchange instead of onclick . 尝试使用onchange而不是onclick 。 You can check it below. 您可以在下面查看。 

 <!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

onclick event on option tag will fail on most versions of IE, Safari and Chrome: option标记上的onclick事件将在大多数版本的IE，Safari和Chrome上失败：

Remove onClick from option.It should be handle by onChange event on select box. 从选项中删除onClick 。应该由选择框上的onChange事件处理。

And if you want to pass the value of selected option then just pass this.value 如果要传递所选选项的值，则只需传递this.value

Try this 尝试这个 

 <!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

Add onchange event handler to select tag instead of onclick to each of the option 添加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

Generic approach 通用方法

  • Set an array with the <select> id's . 设置一个带有<select> id的数组。
  • Create a function that shows the next <select> . 创建一个显示下一个<select>的函数。 Use classList .hide() in the function. 在函数中使用classList .hide （）。
  • Append the function to every <select> . 将功能附加到每个<select> 。

Example 例 

 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.

相关问题 角度显示基于上下拉列表值的一个下拉列表 - Angular show one drop-down list based on upper drop-down list value 不要在下拉列表中显示第一个选项 - Do not show the first option in drop-down list 显示/隐藏列，具体取决于下拉列表中的选择 - Show/hide columns depending to choice in drop-down list Ember中的下拉列表； - Drop-down list in Ember; 显示/隐藏分区以及2个下拉列表 - Show/Hide Division with 2 Drop-down Lists 如何通过单击显示/隐藏下拉菜单？ - How to show/hide a drop-down by clicking on it? 根据下拉选择显示和隐藏 - show and hide based on drop-down selection Mad Libs下拉列表失败 - Mad Libs Drop-down List Faliure 选择MVC复制下拉列表 - MVC Duplicating Drop-Down list on selection 使用内联JavaScript更新下拉列表 - Updating a drop-down list with inline javascript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM