三级联动与js封装所有地址

嘴强程序员

已于 2022-03-18 18:45:47 修改

阅读量175

点赞数

文章标签： xhtml html javascript

于 2022-03-12 10:15:40 首次发布

本文链接：https://blog.csdn.net/qq_62898618/article/details/123439254

版权

这篇博客展示了如何使用HTML和JavaScript实现全国城市三级联动的效果，通过下拉框选择省、市、区，并实时显示所选信息。同时，还提供了二级联动的两种实现方式，一种基于特定条件清空并填充下拉框选项，另一种则是通过JSON数据动态生成选项。

摘要由CSDN通过智能技术生成

三级联动地址


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>全国城市三级联动</title>

<style type="text/css">

body{ background:#EEEEEE;margin:0; padding:0; font-family:"微软雅黑", Arial, Helvetica, sans-serif; }

a{ color:#006600; text-decoration:none;}

a:hover{color:#990000;}

.top{ margin:5px auto; color:#990000; text-align:center;}

.info select{ border:1px #993300 solid; background:#FFFFFF;}

.info{ margin:5px; text-align:center;}

.info #show{ color:#3399FF; }

.bottom{ text-align:right; font-size:12px; color:#CCCCCC; width:1000px;}

</style>

</head>

<body>

<div class="top">

	<h1>全国城市三级联动</h1>

</div>

<div class="info">

	<div>

	<select id="s_province" name="s_province"></select>  

    <select id="s_city" name="s_city" ></select>  

    <select id="s_county" name="s_county"></select>

    <script class="resources library" src="area.js" type="text/javascript"></script>

    

    <script type="text/javascript">_init_area();</script>

    </div>

    <div id="show"></div>

</div>

<script type="text/javascript">

var Gid  = document.getElementById ;

var showArea = function(){

	Gid('show').innerHTML = "<h3>省" + Gid('s_province').value + " - 市" + 	

	Gid('s_city').value + " - 县/区" + 

	Gid('s_county').value + "</h3>"

							}

Gid('s_county').setAttribute('onchange','showArea()');

</script>

</body>

</html>

封装js 所有省市区

百度网盘请输入提取码

提取码：ii8p

下拉框的一些方法


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入外部式js文件 -->
		<script src="js/city.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
					JavaScript之Select和Option对象
					select对象|option对象
						length 长度
						selectedIndex 获取选中项的索引(下标)
						options 返回一个数组（所有的option项）
						options[3] 获取指定下标的option对象
						
						obj.options[index].value; 获取选中项options的value
						
						obj.options[index].text; 获取选中项options的text
						
						obj.add(new Option("文本" ,"值" ));    
						
						option对象
							利用Option对象来创建option标签
								var option = new Option("初中","初中");
				 -->
		<h3>1.JavaScript之Select和Option对象</h3>
		<select id="degree">
			<option value="0">--请选择学历--</option>
			<option value="gaozhong">高中</option>
			<option value="dazhuan">大专</option>
			<option value="benke">本科</option>
			<option value="yanjiusheng">研究生</option>
			<option value="boshi">博士</option>
		</select>
		<input type="button" value="获取下拉列表信息" id="btnGet">
		<input type="button" value="添加选项" id="btnAdd">
		<input type="button" value="清空下拉列表" id="btnClear">
		<input type="button" value="选中本科" id="btnSelect">
		<!-- js区域 -->
		<script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}
			// 获取下拉列表信息
			$("btnGet").onclick = function() {
				alert(123);
				获取select标签下的option标签的个数
				console.log($("degree").length);

				获取被选中的option的索引（下标）
				console.log($("degree").selectedIndex);

				设置选中的option
				$("degree").selectedIndex = 3;

				获取option数组
				console.log($("degree").options);
				获取指定元素对象
				console.log($("degree").options[2]);

				$("degree").selectedIndex = 3;
				console.log($("degree").options[$("degree").selectedIndex]);

				获取value值
				console.log($("degree").options[2].value);
				获取文本内容
				console.log($("degree").options[2].innerHTML);
				console.log($("degree").options[2].text);
				
				// 创建一个option标签  createElement+appchild
				var option = new Option('1','2');
				console.log(option);
				console.log(typeof(option));
			};
			$("btnAdd").onclick =function(){
				//添加一个option到末尾
				var option = new Option('学前班','xqb');
				// $("degree").add(option);
				// 在指定下标的后面添加选项
				$("degree").add(option,3);
			};
			
			$("btnClear").onclick = function(){
				$("degree").length = 0;
				// 方式2  获取所有的option 遍历 通过父节点degree.removeChild(option)
			};
			
			$("btnSelect").onclick = function(){
				// $("degree").selectedIndex = 3;
				// 不采取下标  通过文本"本科"
				var myoptions = $("degree").querySelectorAll('option');
				console.log(myoptions);
				for(var i = 0;i<myoptions.length;i++){
					if(myoptions[i].value == 'benke'){
						$("degree").selectedIndex = i;
						break;
					}
				}
			}
		</script>


		<hr>
		<h3>2.二级联动[版本1]</h3>
		<select id="s1">
			<option value="湖南省">湖南省</option>
			<option value="广东省">广东省</option>
			<option value="广西省">广西省</option>
		</select>
		<select id="s2"></select>
		
		<!-- js -->
		<script type="text/javascript">
			// 网上搜索    JSON格式省市区脚本
		
		
			// 下拉框的改变监听事件  onchange
			$("s1").onchange = function(){
				// 获取被选中的值
				var s1Value = this.value;
				// alert(s1Value);
				// 清空第二个下拉框
				$("s2").length = 0;
				if(s1Value === '湖南省'){
					$("s2").add(new Option('长沙市',"长沙市"));
					$("s2").add(new Option('邵阳市',"邵阳市"));
					$("s2").add(new Option('娄底市',"娄底市"));
					$("s2").add(new Option('衡阳市',"衡阳市"));
					$("s2").add(new Option('永州市',"永州市"));
					$("s2").add(new Option('益阳市',"益阳市"));
				}else if(s1Value === '广东省'){
					$("s2").add(new Option('中山市',"中山市"));
					$("s2").add(new Option('佛山市',"佛山市"));
					$("s2").add(new Option('东莞市',"东莞市"));
					$("s2").add(new Option('清远市',"清远市"));
				}
			};
		</script>
		
		
		
		
		
		
		<h3>3.二级联动[版本2]</h3>
		省:<select id="province" name="province">
			<option selected="selected" value="all">全部</option>
		</select>
		市:
		<select id="city" name="city">
			<option selected="selected" value="all">全部</option>
		</select>
		
		
		<script type="text/javascript">
			// console.log(typeof(citydata));
			for(var pro in citydata){
				$("province").add(new Option(pro,pro))
			}	
			
			var stu = {"name":"张三","sex":"男"};
			
			
			// 设置$("province") 改变事件
			$("province").onchange = function(){
				// 清空第二个下拉框中的所有选项
				$("city").length = 0;
				$("city").add(new Option("请选择","请选择"));
				// 获取所有的省份（遍历）  获取选中的省份
				for(var pro in citydata){
					if(pro === this.value){
						// console.log(pro);
						// console.log(typeof(citydata[pro]));
						console.log(citydata[pro]);
						// break;
						// 遍历得到点击省份的所有城市
						for(var ct in citydata[pro]){
							// console.log(citydata[pro][ct]);
							$("city").add(new Option(citydata[pro][ct],citydata[pro][ct]));
						}
					}
				}
			};
		</script>
	</body>
</html>

嘴强程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三级联动与js封装所有地址

三级联动地址<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content...
复制链接

扫一扫