JavaScript 二级省市联动add方法使用

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>省市联动</title>
<script>
function $(id) {
    return document.getElementById(id);
}
//定义一个数组
var sheng=['请选择','湖北省','湖南省'];
var shi=[[],['武汉市','孝感市'],['长沙市','株洲市']];
window.onload=function() {
    for(var i=0;i<sheng.length;i++) {
    var op=new Option(sheng[i],sheng[i]);
    $('sheng').options.add(op);
    }
    $('sheng').onchange=function() {
    var index=$('sheng').selectedIndex;
    $('shi').length=0;
    for(var i=0;i<shi[index].length;i++) {
    var op=new Option(shi[index][i],shi[index][i]);
    $('shi').options.add(op);
    }
    }
}
</script>
</head>
<body>
<select id='sheng'></select>
<select id='shi'></select>
</body>
</html>

``html

**<!-- 省市联动

思路分析：

1.准备元素：定义省份与城市的下拉框

2.绑定事件：绑定省份下拉框的change事件

3.准备数据：准备数组存放省份信息,定义二维数组存放城市数据

4.初始化数据：将数组中的省份数据填充到省份下拉框中

5.下拉框change事件：根据选中的省份数据，得到对应的二维数组中的城市数据，并填充到城市下拉框中

创建文本节点 createTextNode()

创建元素 createElement()

追加子元素 appendChild()

实现步骤

1.定义省份与城市下拉框的元素

2.定义省份与城市下拉框所需要的数据（数组与二维数组）

3.填充省份下拉框的数据

3.绑定省份下拉框的change事件，得到被选中项的值，与二维数组中的城市对应

5.通过选中的值(索引) 获取二维数组中对应的数组

6.清空城市下拉框的选中

7.遍历城市数组的数据，填充城市下拉框的值

8.创建元素节点，创建文本节点，将文本节点追加到元素节点中

9.将元素节点追加到城市下拉框中

-->

城市：

</select>

</select>

</div>

```

```javascript

// 2.定义省份与城市下拉框所需要的数据（数组与二维数组）

//省份所需要的数据

var proList=["北京","山西","山东","河北","河南"];

//城市下拉框所需要的数据

var cityList=[

["东城区","西城区","朝阳区","海淀区","昌平区"],

["太原市","大同市","临汾市","晋中市"],

["济南市","青岛市","运城市","烟台市","临沂市"],

["石家庄","邢台市","保定市","海淀区"],

["郑州市","南阳市","焦作市","信阳市"]

];

// 3.填充省份下拉框的数据

for(var i=0;i<proList.length;i++){

//创建元素节点

var opt=document.createElement("option");

//创建文本节点

var txt=document.createTextNode(proList[i]);

//向option元素中追加文本节点

opt.appendChild(txt)

//设置下拉框对应的value属性

opt.value=i;

//将option元素追加到省份下拉框中

document.getElementById("pro").appendChild(opt);

}

//绑定省份下拉框的change事件：当下拉框的选项发生改变时执行的事件

// 4.绑定省份下拉框的change事件，得到被选中项的值，与二维数组中的城市对应

document.getElementById("pro").onchange=function(){

//清空城市下拉框中的数据

document.getElementById("city").options.length=0;

//获取下拉框被选中的值

var index=document.getElementById("pro").value;

//判断是否选中了指定的省份（index值不为空）

if(index==""){

//未选中省份，则设置城市为默认的请选择

document.getElementById("city").innerHTML=' <option value="">请选择</option>';

return;

}

//获取对应城市二维数组中对应的数组

var citys=cityList[index];

//遍历城市数组

for(var i=0;i<citys.length;i++){

//创建元素节点

var opt=document.createElement("option");

//创建文本节点

var txt=document.createTextNode(citys[i]);

//向option元素中追加文本节点

opt.appendChild(txt)

//将option元素追加到省份下拉框中

document.getElementById("city").appendChild(opt);

}

</script>

```

第二种写法jQuery，提示:使用jQuery写法，要使用jquery.js

```javascript

//jquery写法

//省份所需要的数据

var proList=["北京","山西","山东","河北","河南"];

//城市下拉框所需要的数据

var cityList=[

["东城区","西城区","朝阳区","海淀区","昌平区"],

["太原市","大同市","临汾市","晋中市"],

["济南市","青岛市","运城市","烟台市","临沂市"],

["石家庄","邢台市","保定市","海淀区"],

["郑州市","南阳市","焦作市","信阳市"]

];

// 加载省份，填充省份下拉框的数据

for (var i=0;i<proList.length;i++){

//定义下拉选项

var opt=$("<option value='"+i+"'>"+proList[i]+"</option>");

//将下拉选项追加到省份下拉框中

$("#pro").append(opt);

}

//给省份下拉框绑定change事件

$("#pro").change(function(){

//得到当前下拉框被选中项的值

var index=$(this).val();

//得到被选中的省份对应的城市(二维数组)

var citys=cityList[index];

//移除城市下拉框中本有的下拉选项(保留第一个选项)

$("#city option:gt(0)").remove();

//加载城市下拉框

for(var i=0;i < citys.length;i++){

var opt=$("<option value='"+i+"'>"+citys[i]+"</option>");

//将下拉选项追加到省份下拉框中

$("#city").append(opt);

}

})

</script>

```

这样省市联动就完成了。

## 省市联动总结

1.总的来说两种方法都可以实现，但是这两种方法我们都需要学会

虽然说jQuery方法实现比较简单一些，但js也尤其重要

2. 绑定省份下拉框的change事件，得到被选中项的值，与二维数组中的城市对应

3.通过选中的值(索引) 获取二维数组中对应的数组

4.清空城市下拉框的选中

5.遍历城市数组的数据，填充城市下拉框的值

6.创建元素节点，创建文本节点，将文本节点追加到元素节点中

7.将元素节点追加到城市下拉框中

8.我们要了解其中的思路，多敲，多思考。

代码是讲述如果通过IP地址查出相应的位置信息，在百度查询到https://www.ip.cn/是IP地址查询位置的网站，故对此网站的源代码进行爬取，示例代码如下：

#1、首先导入相应的库
import requests #导入爬虫库requests
import re #导入正则表达式的库
#2、对网站进行get请求
def gethtml(kw): #定义获取源代码函数gethtml，参数为kw
 url="https://www.ip.cn/?ip="+kw #设置url地址为地址栏前面部分+参数kw
 headers={"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36"} # 设置网页请求头
 response=requests.get(url, headers=headers) ##伪装浏览器对url进行get请求
 response.encoding=response.apparent_encoding #根据网页内容进行解析编码并赋值给response.encoding
 html=response.text #将响应的内容赋值给html
 pattern1=re.compile(r"<code>.+<code>") #设置正则表达式匹配规则为code标签所有的数据
 result1=re.findall(pattern1,html) #在html源代码中查找所有符合匹配规则pattern1的源代码，并赋值给result1
 print(result1) #打印查找到的结果，即IP和地理位置信息
if __name__=='__main__':
 gethtml("120.31.52.56") #调用gethtml函数，参数为IP地址120.31.52.56

运行结果如下：

['<code>120.31.52.56</code></p><p>所在地理位置：<code>广东省中山市睿江科技</code></p><p>GeoIP: <code>']

图片示例如下：

爬取的完整源代码图

代码块和代码运行结果图

在线咨询

上一篇：9款堪称神器的谷歌插件，你不想试试吗？
下一篇：Java 将PDF转换为PNG图片、HTML、SVG

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript 二级省市联动add方法使用

您的项目需求