整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
<!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.準備元素：定義省份與城市的下拉框
2.綁定事件：綁定省份下拉框的change事件
3.準備數(shù)據(jù)：準備數(shù)組存放省份信息,定義二維數(shù)組存放城市數(shù)據(jù)
4.初始化數(shù)據(jù)：將數(shù)組中的省份數(shù)據(jù)填充到省份下拉框中
5.下拉框change事件：根據(jù)選中的省份數(shù)據(jù)，得到對應的二維數(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ù)組中的城市對應
5.通過選中的值(索引) 獲取二維數(shù)組中對應的數(shù)組
6.清空城市下拉框的選中
7.遍歷城市數(shù)組的數(shù)據(jù)，填充城市下拉框的值
8.創(chuàng)建元素節(jié)點，創(chuàng)建文本節(jié)點，將文本節(jié)點追加到元素節(jié)點中
9.將元素節(jié)點追加到城市下拉框中
-->
<!-- 首先我們先寫好頁面的布局 -->
<div align="center">
城市：
<select id="pro">
<option value="">請選擇</option>
</select>
<select id="city">
<option value="">請選擇</option>
</select>
</div>
```
```javascript
<!-- 我們這里使用兩種寫法，一種是js寫法，另一種是jQuery寫法 -->
<script>
// 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)
//設置下拉框對應的value屬性
opt.value = i;
//將option元素追加到省份下拉框中
document.getElementById("pro").appendChild(opt);
}
//綁定省份下拉框的change事件：當下拉框的選項發(fā)生改變時執(zhí)行的事件
// 4.綁定省份下拉框的change事件，得到被選中項的值，與二維數(shù)組中的城市對應
document.getElementById("pro").onchange = function(){
//清空城市下拉框中的數(shù)據(jù)
document.getElementById("city").options.length = 0;
//獲取下拉框被選中的值
var index = document.getElementById("pro").value;
//判斷是否選中了指定的省份（index值不為空）
if(index == ""){
//未選中省份，則設置城市為默認的請選擇
document.getElementById("city").innerHTML = ' <option value="">請選擇</option>';
return;
}
//獲取對應城市二維數(shù)組中對應的數(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
<script>
//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(){
//得到當前下拉框被選中項的值
var index = $(this).val();
//得到被選中的省份對應的城市(二維數(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)動總結
1.總的來說兩種方法都可以實現(xiàn)，但是這兩種方法我們都需要學會
雖然說jQuery方法實現(xiàn)比較簡單一些，但js也尤其重要
2. 綁定省份下拉框的change事件，得到被選中項的值，與二維數(shù)組中的城市對應
3.通過選中的值(索引) 獲取二維數(shù)組中對應的數(shù)組
4.清空城市下拉框的選中
5.遍歷城市數(shù)組的數(shù)據(jù)，填充城市下拉框的值
6.創(chuàng)建元素節(jié)點，創(chuàng)建文本節(jié)點，將文本節(jié)點追加到元素節(jié)點中
7.將元素節(jié)點追加到城市下拉框中
8.我們要了解其中的思路，多敲，多思考。
代碼是講述如果通過IP地址查出相應的 位置信息，在百度查詢到https://www.ip.cn/是IP地址查詢位置的網(wǎng)站，故對此網(wǎng)站的源代碼進行爬取，示例代碼如下：
#1、首先導入相應的庫
import requests #導入爬蟲庫requests
import re #導入正則表達式的庫
#2、對網(wǎng)站進行get請求
def gethtml(kw): #定義獲取源代碼函數(shù)gethtml，參數(shù)為kw
url="https://www.ip.cn/?ip="+kw #設置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"} # 設置網(wǎng)頁請求頭
response = requests.get(url, headers=headers) ##偽裝瀏覽器對url進行get請求
response.encoding=response.apparent_encoding #根據(jù)網(wǎng)頁內容進行解析編碼并賦值給response.encoding
html=response.text #將響應的內容賦值給html
pattern1=re.compile(r"<code>.+<code>") #設置正則表達式匹配規(guī)則為code標簽所有的數(shù)據(jù)
result1=re.findall(pattern1,html) #在html源代碼中查找所有符合匹配規(guī)則pattern1的源代碼，并賦值給result1
print(result1) #打印查找到的結果，即IP和地理位置信息
if __name__ == '__main__':
gethtml("120.31.52.56") #調用gethtml函數(shù)，參數(shù)為IP地址120.31.52.56
運行結果如下：
['<code>120.31.52.56</code></p><p>所在地理位置：<code>廣東省中山市 睿江科技</code></p><p>GeoIP: <code>']
圖片示例如下：
爬取的完整源代碼圖
代碼塊和代碼運行結果圖
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
