qq_34452646 2021-06-01 23:25 采纳率: 50%
浏览 99
已采纳

js中下拉选框和文本框怎么关联

当选中一个下拉选框就会出现相对应的文本框怎么弄，求大佬解惑

  • 写回答

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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题？