JavaScript 二級省市聯(lián)動add方法使用

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>省市聯(lián)動</title>
<script>
function $(id) {
    return document.getElementById(id);
}
//定義一個數(shù)組
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

**<!-- 省市聯(lián)動

思路分析：

1.準(zhǔn)備元素：定義省份與城市的下拉框

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

3.準(zhǔn)備數(shù)據(jù)：準(zhǔn)備數(shù)組存放省份信息,定義二維數(shù)組存放城市數(shù)據(jù)

4.初始化數(shù)據(jù)：將數(shù)組中的省份數(shù)據(jù)填充到省份下拉框中

5.下拉框change事件：根據(jù)選中的省份數(shù)據(jù)，得到對應(yīng)的二維數(shù)組中的城市數(shù)據(jù)，并填充到城市下拉框中

創(chuàng)建文本節(jié)點 createTextNode()

創(chuàng)建元素 createElement()

追加子元素 appendChild()

實現(xiàn)步驟

1.定義省份與城市下拉框的元素

2.定義省份與城市下拉框所需要的數(shù)據(jù)（數(shù)組與二維數(shù)組）

3.填充省份下拉框的數(shù)據(jù)

3.綁定省份下拉框的change事件，得到被選中項的值，與二維數(shù)組中的城市對應(yīng)

5.通過選中的值(索引) 獲取二維數(shù)組中對應(yīng)的數(shù)組

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

7.遍歷城市數(shù)組的數(shù)據(jù)，填充城市下拉框的值

8.創(chuàng)建元素節(jié)點，創(chuàng)建文本節(jié)點，將文本節(jié)點追加到元素節(jié)點中

9.將元素節(jié)點追加到城市下拉框中

-->

城市：

</select>

</select>

</div>

```

```javascript

// 2.定義省份與城市下拉框所需要的數(shù)據(jù)（數(shù)組與二維數(shù)組）

//省份所需要的數(shù)據(jù)

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

//城市下拉框所需要的數(shù)據(jù)

var cityList = [

["東城區(qū)","西城區(qū)","朝陽區(qū)","海淀區(qū)","昌平區(qū)"],

["太原市","大同市","臨汾市","晉中市"],

["濟南市","青島市","運城市","煙臺市","臨沂市"],

["石家莊","邢臺市","保定市","海淀區(qū)"],

["鄭州市","南陽市","焦作市","信陽市"]

];

// 3.填充省份下拉框的數(shù)據(jù)

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

//創(chuàng)建元素節(jié)點

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

//創(chuàng)建文本節(jié)點

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

//向option元素中追加文本節(jié)點

opt.appendChild(txt)

//設(shè)置下拉框?qū)?yīng)的value屬性

opt.value = i;

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

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

}

//綁定省份下拉框的change事件：當(dāng)下拉框的選項發(fā)生改變時執(zhí)行的事件

// 4.綁定省份下拉框的change事件，得到被選中項的值，與二維數(shù)組中的城市對應(yīng)

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

//清空城市下拉框中的數(shù)據(jù)

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

//獲取下拉框被選中的值

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

//判斷是否選中了指定的省份（index值不為空）

if(index == ""){

//未選中省份，則設(shè)置城市為默認(rèn)的請選擇

document.getElementById("city").innerHTML = ' <option value="">請選擇</option>';

return;

}

//獲取對應(yīng)城市二維數(shù)組中對應(yīng)的數(shù)組

var citys = cityList[index];

//遍歷城市數(shù)組

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

//創(chuàng)建元素節(jié)點

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

//創(chuàng)建文本節(jié)點

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

//向option元素中追加文本節(jié)點

opt.appendChild(txt)

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

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

}

</script>

```

第二種寫法jQuery，提示:使用jQuery寫法，要使用jquery.js

```javascript

//jquery寫法

//省份所需要的數(shù)據(jù)

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

//城市下拉框所需要的數(shù)據(jù)

var cityList = [

["東城區(qū)","西城區(qū)","朝陽區(qū)","海淀區(qū)","昌平區(qū)"],

["太原市","大同市","臨汾市","晉中市"],

["濟南市","青島市","運城市","煙臺市","臨沂市"],

["石家莊","邢臺市","保定市","海淀區(qū)"],

["鄭州市","南陽市","焦作市","信陽市"]

];

// 加載省份，填充省份下拉框的數(shù)據(jù)

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

//定義下拉選項

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

//將下拉選項追加到省份下拉框中

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

}

//給省份下拉框綁定change事件

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

//得到當(dāng)前下拉框被選中項的值

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

//得到被選中的省份對應(yīng)的城市(二維數(shù)組)

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>

```

這樣省市聯(lián)動就完成了。

## 省市聯(lián)動總結(jié)

1.總的來說兩種方法都可以實現(xiàn)，但是這兩種方法我們都需要學(xué)會

雖然說jQuery方法實現(xiàn)比較簡單一些，但js也尤其重要

2. 綁定省份下拉框的change事件，得到被選中項的值，與二維數(shù)組中的城市對應(yīng)

3.通過選中的值(索引) 獲取二維數(shù)組中對應(yīng)的數(shù)組

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

5.遍歷城市數(shù)組的數(shù)據(jù)，填充城市下拉框的值

6.創(chuàng)建元素節(jié)點，創(chuàng)建文本節(jié)點，將文本節(jié)點追加到元素節(jié)點中

7.將元素節(jié)點追加到城市下拉框中

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

代碼是講述如果通過IP地址查出相應(yīng)的位置信息，在百度查詢到https://www.ip.cn/是IP地址查詢位置的網(wǎng)站，故對此網(wǎng)站的源代碼進(jìn)行爬取，示例代碼如下：

#1、首先導(dǎo)入相應(yīng)的庫
import requests #導(dǎo)入爬蟲庫requests
import re #導(dǎo)入正則表達(dá)式的庫
#2、對網(wǎng)站進(jìn)行g(shù)et請求
def gethtml(kw): #定義獲取源代碼函數(shù)gethtml，參數(shù)為kw
 url="https://www.ip.cn/?ip="+kw #設(shè)置url地址為地址欄前面部分+參數(shù)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"} # 設(shè)置網(wǎng)頁請求頭
 response = requests.get(url, headers=headers) ##偽裝瀏覽器對url進(jìn)行g(shù)et請求
 response.encoding=response.apparent_encoding #根據(jù)網(wǎng)頁內(nèi)容進(jìn)行解析編碼并賦值給response.encoding
 html=response.text #將響應(yīng)的內(nèi)容賦值給html
 pattern1=re.compile(r"<code>.+<code>") #設(shè)置正則表達(dá)式匹配規(guī)則為code標(biāo)簽所有的數(shù)據(jù)
 result1=re.findall(pattern1,html) #在html源代碼中查找所有符合匹配規(guī)則pattern1的源代碼，并賦值給result1
 print(result1) #打印查找到的結(jié)果，即IP和地理位置信息
if __name__ == '__main__':
 gethtml("120.31.52.56") #調(diào)用gethtml函數(shù)，參數(shù)為IP地址120.31.52.56

運行結(jié)果如下：

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

圖片示例如下：

爬取的完整源代碼圖

代碼塊和代碼運行結(jié)果圖

在線咨詢

上一篇：HTML 編輯器
下一篇：HTML+CSS制作導(dǎo)航條

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JavaScript 二級省市聯(lián)動add方法使用

您的項目需求