Web前端（四）jQuery (9) jQ重写省市二级联动

最新推荐文章于 2020-12-04 13:43:33 发布

馬冬梅啊

最新推荐文章于 2020-12-04 13:43:33 发布

阅读量216

点赞数

分类专栏： Web前端 Web前端文章标签： javaweb JavaScript jQuery 前端

本文链接：https://blog.csdn.net/weixin_39782583/article/details/84251113

版权

本文介绍了在2018年11月19日如何使用jQuery重写前端的省市二级联动功能，提供了相应的实现效果展示及源代码。

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

Date：2018/11/19

用jQuery重写省市二级联动，效果如图：

在这里插入图片描述

源代码：

<!-- 

1、绑定事件change；
2、获取用户选择的省份；var val = this.value
3、创建二位数组存储省份和城市；
4、遍历数组，两种方法： $().each() 遍历 jQuery 对象，
   或者$.each(cities,function(i,n){
   }用于遍历任何对象,
   前面为对象的成员或数组的索引，i,n分别为key和value
5、找到与用户选择一致的省份if(val==i),获取相应地级市
6、创建文本节点；textNode  createTextNode
7、创建option元素节点；  createElement
8、将文本节点添加到option元素节点中 $(optEle).append(textNode);
9、option追加到第二个select中 $("#city").append(optEle); 
                        或者 $(optEle).appendTo($("#city"));
10、清除第二个下拉列表，empty();

注：$(optEle).append(textNode);此处的$()里面没有""; 

-->


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用jQuery完成省市二级联动</title>
		<style type="text/css">
			.top{
   
				border: 1px solid red;
				width: 32.9%;
				height: 50px;
				float: left;
			}

			#clear{
   
				clear: both;
			}
			#menu{
   
				border: 1px solid blue;
				width: 99%;
				height: 40px;
				background-color: black;
			}
			#menu ul li{
   
				display: inline;
				color: white;
				font-size: 19px;
			}
			#bottom{
   
				text-align: center;
			}
			#contanier{
   
				border: 1px solid red;
				width: 99%;
				height: 600px;
				background: url(../img/regist_bg.jpg);
				position: relative;
			}
			#content{
   
				border: 5px solid gray;
				width: 50%;
				height: 60%;
				position: absolute;
				top: 100px;
				left: 300px;
				background-color: white;
				padding-top: 50px;
			}

		<