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

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

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

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>

<p>
<select onchange="fun(this,'text1')">
	<option value="0" selected="selected">隐藏文本框</option>
	<option value="1">显示文本框</option>
</select>
<input type="text" id="text1" value="" style="display: none;" />
</p>
<p>
<select onchange="fun(this,'text2')">
	<option value="0" selected="selected">隐藏文本框</option>
	<option value="1">显示文本框</option>
</select>
<input type="text" id="text2" value="" style="display: none;" />
</p>
<p>
<select onchange="fun(this,'text3')">
	<option value="0" selected="selected">隐藏文本框</option>
	<option value="1">显示文本框</option>
</select>
<input type="text" id="text3" value="" style="display: none;" />
</p>
<script type="text/javascript">
function fun(t,id) {
	document.getElementById(id).style.display = t.value==1?"":"none";
}
</script>
</body>
</html>

写js实现，绑定事件，具体可私信我

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>
<select onchange="fun(this)">
	<option value="1" selected="selected">显示文本框1</option>
	<option value="2">显示文本框2</option>
	<option value="3">显示文本框3</option>
	<option value="4">显示文本框4</option>
</select>
<input type="text" id="text1" value="文本框1" />
<input type="text" id="text2" value="文本框2" style="display: none;" />
<input type="text" id="text3" value="文本框3" style="display: none;" />
<input type="text" id="text4" value="文本框4" style="display: none;" />
<script type="text/javascript">
function fun(t) {
	var ops = t.options;
	for (var i = 0; i < ops.length; i++) {
		document.getElementById("text"+ops[i].value).style.display = "none";
	}
	document.getElementById("text"+t.value).style.display = "";
}
</script>
</body>
</html>

联级选择框类似于选择省出来市选择市出来县

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632