js省市區(qū)級(jí)聯(lián)查詢（插件版&無(wú)插件版）
更新時(shí)間：2017年03月21日 16:08:20 作者：zt_fucker
這篇文章主要為大家詳細(xì)介紹了js省市區(qū)級(jí)聯(lián)查詢，包括插件版和無(wú)插件版，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
實(shí)現(xiàn)方式千差萬(wàn)別，滿足自己需求的才是最好的。
插件版提供了兩種方式：
distpicker版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="css/city.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src="js/jquery-2.2.0.min.js"></script> <script src="js/distpicker.data.js"></script> <script src="js/distpicker.js"></script> </head> <body> <h5>Demo:</h5> <form class="form-inline"> <div data-toggle="distpicker"> <div class="form-group"> <label class="sr-only" for="province1">Province</label> <select class="form-control" id="province1"></select> </div> <div class="form-group"> <label class="sr-only" for="city1">City</label> <select class="form-control" id="city1"></select> </div> <div class="form-group"> <label class="sr-only" for="district1">District</label> <select class="form-control" id="district1"></select> </div> </div> </form> </body> </html>
distpicker.data.js 、distpicker.js 下載地址
第二種插件版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/city.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/city.min.js"></script>
</head>
<body>
<div id="content-wrap">
<div id="content-left" class="demo">
<form action="" name="form1">
<div class="infolist">
<lable>所在地區(qū)：</lable>
<div class="liststyle">
<span id="Province">
<i>請(qǐng)選擇省份</i>
<ul>
<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" alt="請(qǐng)選擇省份">請(qǐng)選擇省份</a></li>
</ul>
<input type="hidden" name="cho_Province" value="請(qǐng)選擇省份">
</span>
<span id="City">
<i>請(qǐng)選擇城市</i>
<ul>
<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" alt="請(qǐng)選擇城市">請(qǐng)選擇城市</a></li>
</ul>
<input type="hidden" name="cho_City" value="請(qǐng)選擇城市">
</span>
<span id="Area">
<i>請(qǐng)選擇地區(qū)</i>
<ul>
<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" alt="請(qǐng)選擇地區(qū)">請(qǐng)選擇地區(qū)</a></li>
</ul>
<input type="hidden" name="cho_Area" value="請(qǐng)選擇地區(qū)">
</span>
</div>
</div>
</form>
</div>
<div id="content-right"></div>
</div>
</body>
</html>
相關(guān)js下載地址：鏈接: jqueryminjs
css下載地址：鏈接: css
無(wú)插件版：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" rel="external nofollow" >
</head>
<body>
<p> </p>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label col-sm-2">所在區(qū)域</label>
<div class="col-sm-3">
<select name="input_province" id="input_province" class="form-control">
</select>
</div>
<div class="col-sm-3">
<select name="input_city" id="input_city" class="form-control">
</select>
</div>
<div class="col-sm-3">
<select name="input_area" id="input_area" class="form-control">
</select>
</div>
</div>
</div>
</div>
<p> </p>
<div class="row text-center">數(shù)據(jù)來(lái)源：
<a target="_blank">http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201504/t20150415_712722.html</a>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/pdata.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
var html = "<option value=''>== 請(qǐng)選擇 ==</option>";
$("#input_city").append(html);
$("#input_area").append(html);
$.each(pdata, function(idx, item) {
if(parseInt(item.level) == 1) {
html += "<option value='" + item.name + "' exid='" + item.code + "'>" + item.name + "</option>";
}
});
$("#input_province").append(html);
$("#input_province").change(function() {
if($(this).val() == "") return;
$("#input_city option").remove();
$("#input_area option").remove();
var code = $(this).find("option:selected").attr("exid");
code = code.substring(0, 2);
var html = "<option value=''>== 請(qǐng)選擇 ==</option>";
$("#input_area").append(html);
$.each(pdata, function(idx, item) {
if(parseInt(item.level) == 2 && code == item.code.substring(0, 2)) {
html += "<option value='" + item.name + "' exid='" + item.code + "'>" + item.name + "</option>";
}
});
$("#input_city").append(html);
});
$("#input_city").change(function() {
if($(this).val() == "") return;
$("#input_area option").remove();
var code = $(this).find("option:selected").attr("exid");
code = code.substring(0, 4);
var html = "<option value=''>== 請(qǐng)選擇 ==</option>";
$.each(pdata, function(idx, item) {
if(parseInt(item.level) == 3 && code == item.code.substring(0, 4)) {
html += "<option value='" + item.name + "' exid='" + item.code + "'>" + item.name + "</option>";
}
});
$("#input_area").append(html);
});
//綁定
$("#input_province").val("山東省");
$("#input_province").change();
$("#input_city").val("濰坊市");
$("#input_city").change();
$("#input_area").val("諸城市");
});
</script>
</body>
</html>
pdata.js下載地址
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ES6中Proxy與Reflect實(shí)現(xiàn)重載(overload)的方法
這篇文章主要介紹了ES6中Proxy與Reflect實(shí)現(xiàn)重載(overload)的方法,分析了重載的原理及使用Proxy和Reflect來(lái)實(shí)現(xiàn)重載的操作步驟與相關(guān)技巧,需要的朋友可以參考下2017-03-03
使用遞歸遍歷對(duì)象獲得value值的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇使用遞歸遍歷對(duì)象獲得value值的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
Bootstrap編寫一個(gè)兼容主流瀏覽器的受眾巨幕式風(fēng)格頁(yè)面
這篇文章主要介紹了Bootstrap編寫一個(gè)兼容IE8、谷歌等主流瀏覽器的受眾巨幕式風(fēng)格頁(yè)面，感興趣的小伙伴們可以參考一下2016-07-07
如何使用瀏覽器擴(kuò)展篡改網(wǎng)頁(yè)中的JS?文件
這篇文章主要為大家介紹了如何使用瀏覽器擴(kuò)展篡改網(wǎng)頁(yè)中的JS文件實(shí)現(xiàn)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
分享一個(gè)自己寫的table表格排序js插件(高效簡(jiǎn)潔)
在前不久做的一個(gè)web項(xiàng)目中，需要實(shí)現(xiàn)js表格排序的效果，當(dāng)時(shí)為了省事，就在網(wǎng)上找了幾個(gè)相關(guān)的js插件2011-10-10
微信小程序textarea層級(jí)過(guò)高(蓋住其他元素)問(wèn)題的解決辦法
這篇文章主要給大家介紹了關(guān)于微信小程序textarea層級(jí)過(guò)高(蓋住其他元素)問(wèn)題的解決辦法，文中通過(guò)圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
關(guān)于Promise基本方法的簡(jiǎn)單實(shí)現(xiàn)
Promise大家一定都不陌生了,JavaScript異步流程從最初的Callback,到Promise,到Generator,再到目前使用最多的Async/Await,下面這篇文章主要給大家介紹了關(guān)于Promise基本方法的簡(jiǎn)單實(shí)現(xiàn),需要的朋友可以參考下2022-02-02
JavaScript使用小插件實(shí)現(xiàn)倒計(jì)時(shí)的方法講解
今天小編就為大家分享一篇關(guān)于JavaScript使用小插件實(shí)現(xiàn)倒計(jì)時(shí)的方法講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-03-03
JavaScript字符串操作的四個(gè)實(shí)用技巧
在制作前端頁(yè)面的過(guò)程中,經(jīng)常需要用到JavaScript進(jìn)行邏輯處理,很多時(shí)候都需要對(duì)字符串進(jìn)行操作,這篇文章主要給大家介紹了關(guān)于JavaScript字符串操作的四個(gè)實(shí)用技巧,需要的朋友可以參考下2021-07-07
JS實(shí)現(xiàn)的透明度漸變動(dòng)畫效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的透明度漸變動(dòng)畫效果,涉及javascript響應(yīng)鼠標(biāo)事件針對(duì)頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04