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方法使用

您的項目需求