jquery實(shí)現(xiàn)戶籍地選擇下拉框
更新時(shí)間：2021年06月01日 14:36:07 作者：WJX+WT
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)戶籍地選擇下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
利用jquery實(shí)現(xiàn)戶籍地選擇下拉框的具體代碼，供大家參考，具體內(nèi)容如下
data.js
var data = [{
provname: '浙江省',
provId: 1,
citys: [{
cityname: "杭州市",
cityId: 101,
areas: [{
areaname: "杭州一區(qū)",
areaId: 1011
},
{
areaname: "杭州二區(qū)",
areaId: 1012
}
]
}, {
cityname: "溫州市",
cityId: 102,
areas: [{
areaname: '溫州一區(qū)',
areaId: 1021
}, {
areaname: '溫州二區(qū)',
areaId: 1022
}]
}, {
cityname: "寧波市",
cityId: 103,
areas: [{
areaname: '寧波一區(qū)',
areaId: 1031
}, {
areaname: '寧波二區(qū)',
areaId: 1032
}]
}, {
cityname: "紹興市",
cityId: 104,
areas: [{
areaname: '紹興一區(qū)',
areaId: 1041
}, {
areaname: '紹興二區(qū)',
areaId: 1042
}]
}]
}, {
provname: '山東省',
provId: 2,
citys: [{
cityname: "濟(jì)南市",
cityId: 201,
areas: [{
areaname: "濟(jì)南一區(qū)",
areaId: 2011
},
{
areaname: "濟(jì)南二區(qū)",
areaId: 2012
}
]
}, {
cityname: "青島市",
cityId: 202,
areas: [{
areaname: '青島一區(qū)',
areaId: 2021
}, {
areaname: '青島二區(qū)',
areaId: 2022
}]
}, {
cityname: "濟(jì)寧市",
cityId: 203,
areas: [{
areaname: '濟(jì)寧一區(qū)',
areaId: 2031
}, {
areaname: '濟(jì)寧二區(qū)',
areaId: 2032
}]
}, {
cityname: "濰坊市",
cityId: 204,
areas: [{
areaname: '濰坊一區(qū)',
areaId: 2041
}, {
areaname: '濰坊二區(qū)',
areaId: 2042
}]
}]
},
{
provname: '廣東省',
provId: 3,
citys: [{
cityname: "廣州市",
cityId: 301,
areas: [{
areaname: "廣州一區(qū)",
areaId: 3011
},
{
areaname: "廣州二區(qū)",
areaId: 3012
}
]
}, {
cityname: "潮陽市",
cityId: 302,
areas: [{
areaname: '潮陽一區(qū)',
areaId: 3021
}, {
areaname: '潮陽二區(qū)',
areaId: 3022
}]
}, {
cityname: "澄海市",
cityId: 303,
areas: [{
areaname: '澄海一區(qū)',
areaId: 3031
}, {
areaname: '澄海二區(qū)',
areaId: 3032
}]
}, {
cityname: "潮州市",
cityId: 304,
areas: [{
areaname: '潮州一區(qū)',
areaId: 3041
}, {
areaname: '潮州二區(qū)',
areaId: 3042
}]
}]
},
{
provname: '甘肅省',
provId: 4,
citys: [{
cityname: "蘭州市",
cityId: 401,
areas: [{
areaname: "蘭州一區(qū)",
areaId: 4011
},
{
areaname: "蘭州二區(qū)",
areaId: 4012
}
]
}, {
cityname: "白銀市",
cityId: 402,
areas: [{
areaname: '白銀一區(qū)',
areaId: 4021
}, {
areaname: '白銀二區(qū)',
areaId: 4022
}]
}, {
cityname: "敦煌市",
cityId: 403,
areas: [{
areaname: '敦煌一區(qū)',
areaId: 4031
}, {
areaname: '敦煌二區(qū)',
areaId: 4032
}]
}, {
cityname: "定西市",
cityId: 404,
areas: [{
areaname: '定西一區(qū)',
areaId: 4041
}, {
areaname: '定西二區(qū)',
areaId: 4042
}]
}]
}
]
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="js/data.js"></script>
</head>
<body>
<!-- 先添加三個(gè)下拉列表 -->
<select name="prov" id="prov">
</select>
<select name="city" id="city">
</select>
<select name="area" id="area">
</select>
<script>
var $prov=$("#prov")
var $city=$("#city")
var $area=$("#area")
$(function(){
//頁面加載完成后觸發(fā)
$.each(data,function(i,e){
$prov.append('<option value="'+e.provId+'">'+e.provname+'</option>') //在$obj的末尾追加子元素newObj
})
$prov.prepend('<option value="" selected>請(qǐng)選擇</option>');
//當(dāng)省名被選擇時(shí)，觸發(fā)以下事件
$prov.on("change",function(){
//遍歷省
$.each(data,function(i,e){
if($prov.val()==e.provId){
//遍歷市
$city.html('<option value="">請(qǐng)選擇</option>');//用來清空之前選擇的市
$.each(e.citys,function(i,e2){
$city.append('<option value="'+e2.cityId+'">'+e2.cityname+'</option>');
})
}
})
})
//當(dāng)市名被選擇時(shí)，觸發(fā)以下事件
$city.on("change",function(){
//遍歷省
$.each(data,function(i,e){
if($prov.val()==e.provId){
$.each(e.citys,function(i,e2){
if($city.val()==e2.cityId){
$area.html('<option value="">請(qǐng)選擇</option>');
$.each(e2.areas,function(i,e3){
$area.append('<option value="'+e3.areaId+'">'+e3.areaname+'</option>');
})
}
})
}
})
})
})
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery操作select下拉框的text值和value值的方法
- jquery multiSelect 多選下拉框
- 基于jQuery的select下拉框選擇觸發(fā)事件實(shí)例分析
- jquery及原生js獲取select下拉框選中的值示例
- jquery獲得下拉框值的代碼
- jquery動(dòng)態(tài)加載select下拉框示例代碼
- jQuery+easyui中的combobox實(shí)現(xiàn)下拉框特效
- Jquery操作下拉框(DropDownList)實(shí)現(xiàn)取值賦值
- jQuery實(shí)現(xiàn)監(jiān)聽下拉框選中內(nèi)容發(fā)生改變操作示例
- JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果實(shí)例講解
相關(guān)文章
jquery ajax異步提交表單數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了jquery ajax異步提交表單數(shù)據(jù)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
在jquery中的ajax方法怎樣通過JSONP進(jìn)行遠(yuǎn)程調(diào)用
這一節(jié)主要演示下在JQUERY中的ajax方法怎樣通過JSONP進(jìn)行遠(yuǎn)程調(diào)用,需要的朋友可以參考下2014-04-04
使用jquery選擇器如何獲取父級(jí)元素、同級(jí)元素、子元素
這篇文章主要介紹了使用jquery選擇器如何獲取父級(jí)元素、同級(jí)元素、子元素,需要的朋友可以參考下2014-05-05
jQuery Selectors(選擇器)的使用(九、表單對(duì)象屬性篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實(shí)例方式進(jìn)行講述，以簡(jiǎn)單，全面為基礎(chǔ)，不會(huì)涉及很深，我的學(xué)習(xí)方法：先入門，后進(jìn)階！2009-12-12
這篇文章主要介紹了jQuery中each()方法用法,以實(shí)例形式詳細(xì)分析了each()方法的功能、定義及使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12
jquery使用ajax實(shí)現(xiàn)微信自動(dòng)回復(fù)插件
這篇文章主要介紹了jquery使用ajax實(shí)現(xiàn)微信自動(dòng)回復(fù)插件,需要的朋友可以參考下2014-04-04
基于Jquery與WebMethod投票功能實(shí)現(xiàn)代碼
基于Jquery與WebMethod投票功能實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-01-01
這篇文章主要介紹了jQuery選擇器特殊字符與屬性空格問題。通過選擇器中含有特殊符號(hào)的注意事項(xiàng)和選擇器中含有空格的注意事項(xiàng)詳細(xì)介紹了解決問題的辦法,需要的朋友可以參考下2017-08-08
jquery解析json格式數(shù)據(jù)的方法(對(duì)象、字符串)
這篇文章主要介紹了jquery解析json格式數(shù)據(jù)的方法,包括針對(duì)json對(duì)象及json字符串的解析技巧,并附帶了完整的jQuery解析json數(shù)據(jù)示例,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
jQuery DateTimePicker 日期和時(shí)間插件示例
jQuery UI很強(qiáng)大，其中的日期選擇插件Datepicker是一個(gè)配置靈活的插件，這篇文章主要介紹了jQuery DateTimePicker 日期和時(shí)間插件示例，有興趣的可以了解一下。2017-01-01