简单的两级联动并获取内部选择的数值

最新推荐文章于 2023-10-25 13:54:02 发布

gjw9987654321

最新推荐文章于 2023-10-25 13:54:02 发布

阅读量206

点赞数

分类专栏：工作之余的练习文章标签： html html5 javascript

本文链接：https://blog.csdn.net/gjw9987654321/article/details/119918470

版权

工作之余的练习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这几天做了一个小一点的两级联动的小练习，中间对于如何获取内部选择的值，走进进了岔道，所里整理了一下思路，将练习的项目代码粘贴在下面，有需要更够给您带来一点微光将是我最大的荣幸。

HTML部分的代码如下所示：

        <div class="address">
			省：<select>
				<option value="">-请选择-</option>
				<option value="0">河南</option>
				<option value="1">河北</option>
				<option value="2">陕西</option>
			</select>
			市：<select>
				<option value="">-请选择-</option>
			</select>
			<p class="show"></p>
			<button type="button" onclick="showCity()">点击</button>
		</div>

对外部边框进行了简单的装饰

.address{
				width: 350px;
				height: 150px;
				border: 1px solid black;
				margin: 50px auto;
			}

JS部分的代码段如下所示：

        // 创建城市的数组
		var HNcity = ["郑州","安阳","信阳","南阳","泌阳","荥阳","洛阳"];
		var HBcity = ["邯郸","石家庄","邢台","张家口","唐山","沧州"];
		var SXcity = ["西安","渭南","延安","榆林","汉中","咸阳"];
		var select1 = document.querySelector('select');
		var select2 = select1.nextElementSibling;
		var shows = document.getElementsByClassName("show")[0];
		select1.onchange = function(){
			// 首先对第二个下拉框进行清空操作
			select2.innerHTML = "<option>-请选择-</option>"
			if(select1.value == "0"){
				var hncity = [];
				for (var i = 0; i < HNcity.length; i++) {
					hncity[i] = document.createElement("option");
					hncity[i].innerHTML = HNcity[i];
					select2.appendChild(hncity[i])
				}
			}else if(select1.value == "1"){
				var hbcity = [];
				for (var i = 0; i < HBcity.length; i++) {
					hbcity[i] = document.createElement("option");
					hbcity[i].innerHTML = HBcity[i];
					select2.appendChild(hbcity[i])
				}
			}else if(select1.value == "2"){
				var sxcity = [];
				for (var i = 0; i < SXcity.length; i++) {
					sxcity[i] = document.createElement("option");
					sxcity[i].innerHTML = SXcity[i];
					select2.appendChild(sxcity[i])
				}
		}
		
		
	}
    //对选择的内容，进行显示，当将显示放到一个事件中，就正常了。
	function showCity(){
		var index = select1.selectedIndex;
		var index1 = select2.selectedIndex;
		// console.log(select1.options[index].text);
		// console.log(select2.options[index1].text)
		shows.innerHTML = "所选的省份为："+select1.options[index].text+"&nbsp;&nbsp;&nbsp"+"所选的城市为："+select2.options[index1].text
		
		
	}

获取内部选择的值的操作详解

//获取对应的select对象
var select1 = document.querySelector('select');
var select2 = select1.nextElementSibling;
//获取被选中的下拉框对应对象的索引值
var index = select1.selectedIndex;
var index1 = select2.selectedIndex;
//获取被选中对象的值,注意这里是options，获取的是对象框内的value代表的内容
console.log(select1.options[index].text);//获取第一个下拉框内部选择的值
console.log(select2.options[index1].text)//获取第二个下拉框内部选择的值
将上面的数值用添加到P标签中进行展示
shows.innerHTML = "所选的省份为："+select1.options[index].text+"&nbsp;&nbsp;&nbsp"+"所选的城市为："+select2.options[index1].text

整个练习的代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>做一个简单的地址选择器</title>
		<style type="text/css">
			.address{
				width: 350px;
				height: 150px;
				border: 1px solid black;
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<div class="address">
			省：<select>
				<option value="">-请选择-</option>
				<option value="0">河南</option>
				<option value="1">河北</option>
				<option value="2">陕西</option>
			</select>
			市：<select>
				<option value="">-请选择-</option>
			</select>
			<p class="show"></p>
			<button type="button" onclick="showCity()">点击</button>
		</div>
	</body>
	<script type="text/javascript">
		// 创建城市的数组
		var HNcity = ["郑州","安阳","信阳","南阳","泌阳","荥阳","洛阳"];
		var HBcity = ["邯郸","石家庄","邢台","张家口","唐山","沧州"];
		var SXcity = ["西安","渭南","延安","榆林","汉中","咸阳"];
		var select1 = document.querySelector('select');
		var select2 = select1.nextElementSibling;
		var shows = document.getElementsByClassName("show")[0];
		select1.onchange = function(){
			// 首先对第二个下拉框进行清空操作
			select2.innerHTML = "<option>-请选择-</option>"
			if(select1.value == "0"){
				var hncity = [];
				for (var i = 0; i < HNcity.length; i++) {
					hncity[i] = document.createElement("option");
					hncity[i].innerHTML = HNcity[i];
					select2.appendChild(hncity[i])
				}
			}else if(select1.value == "1"){
				var hbcity = [];
				for (var i = 0; i < HBcity.length; i++) {
					hbcity[i] = document.createElement("option");
					hbcity[i].innerHTML = HBcity[i];
					select2.appendChild(hbcity[i])
				}
			}else if(select1.value == "2"){
				var sxcity = [];
				for (var i = 0; i < SXcity.length; i++) {
					sxcity[i] = document.createElement("option");
					sxcity[i].innerHTML = SXcity[i];
					select2.appendChild(sxcity[i])
				}
		}
		
		
	}
	function showCity(){
		var index = select1.selectedIndex;
		var index1 = select2.selectedIndex;
		// console.log(select1.options[index].text);
		// console.log(select2.options[index1].text)
		shows.innerHTML = "所选的省份为："+select1.options[index].text+"&nbsp;&nbsp;&nbsp"+"所选的城市为："+select2.options[index1].text
		
		
	}
	</script>
</html>

如有疑问，欢迎大家留言讨论，大家互相学习，共同进步！

不做最好的程序员，就做最牛的干饭人！

gjw9987654321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的两级联动并获取内部选择的数值

这几天做了一个小一点的两级联动的小练习，中间对于如何获取内部选择的值，走进进了岔道，所里整理了一下思路，将练习的项目代码粘贴在下面，有需要更够给您带来一点微光将是我最大的荣幸。HTML部分的代码如下所示： <div class="address"> 省：<select> <option value="">-请选择-</option> <option value="0">河南</option>
复制链接

扫一扫