当选中一个下拉选框就会出现相对应的文本框怎么弄,求大佬解惑
6条回答 默认 最新
- 风雪一更 2021-06-02 14:38关注
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; list-style:none; } .wrap{ padding: 50px; } select{ margin-bottom: 10px; } input{ display: none; } </style> </head> <body> <div class="wrap"> <select id="slt" name="slt"> <option value="value0">请选择</option> <option value="value1">option1</option> <option value="value2">option2</option> <option value="value3">option3</option> </select> <input id="ipt1" type="text" placeholder="我是输入框1" /> <input id="ipt2" type="text" placeholder="我是输入框2" /> <input id="ipt3" type="text" placeholder="我是输入框3" /> </div> </body> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var slt = document.getElementById("slt"); var ipt1 = document.getElementById("ipt1"); var ipt2 = document.getElementById("ipt2"); var ipt3 = document.getElementById("ipt3"); slt.onchange = function(){ switch (slt.value){ case "value1": ipt1.style.display = "block"; ipt2.style.display = "none"; ipt3.style.display = "none"; break; case "value2": ipt1.style.display = "none"; ipt2.style.display = "block"; ipt3.style.display = "none"; break; case "value3": ipt1.style.display = "none"; ipt2.style.display = "none"; ipt3.style.display = "block"; break; } } </script> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥60 更换迈创SOL6M4AE卡的时候,驱动要重新装才能使用,怎么解决?
- ¥15 让node服务器有自动加载文件的功能
- ¥15 jmeter脚本回放有的是对的有的是错的
- ¥15 r语言蛋白组学相关问题
- ¥15 Python时间序列如何拟合疏系数模型
- ¥15 求学软件的前人们指明方向🥺
- ¥50 如何增强飞上天的树莓派的热点信号强度,以使得笔记本可以在地面实现远程桌面连接
- ¥20 双层网络上信息-疾病传播
- ¥50 paddlepaddle pinn
- ¥20 idea运行测试代码报错问题