js省市區(qū)級聯(lián)查詢（插件版&無插件版）
更新時(shí)間：2017年03月21日 16:08:20 作者：zt_fucker
這篇文章主要為大家詳細(xì)介紹了js省市區(qū)級聯(lián)查詢，包括插件版和無插件版，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
實(shí)現(xià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>請選擇省份</i>
<ul>
<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" alt="請選擇省份">請選擇省份</a></li>
</ul>
<input type="hidden" name="cho_Province" value="請選擇省份">
</span>
<span id="City">
<i>請選擇城市</i>
<ul>
<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" alt="請選擇城市">請選擇城市</a></li>
</ul>
<input type="hidden" name="cho_City" value="請選擇城市">
</span>
<span id="Area">
<i>請選擇地區(qū)</i>
<ul>
<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" alt="請選擇地區(qū)">請選擇地區(qū)</a></li>
</ul>
<input type="hidden" name="cho_Area" value="請選擇地區(qū)">
</span>
</div>
</div>
</form>
</div>
<div id="content-right"></div>
</div>
</body>
</html>
相關(guān)js下載地址：鏈接: jqueryminjs
css下載地址：鏈接: css
無插件版：
<!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ù)來源：
<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=''>== 請選擇 ==</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=''>== 請選擇 ==</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=''>== 請選擇 ==</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下載地址
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文分享了一個(gè)利用AmCharts制作的汽車速度計(jì)速表，通過設(shè)置不同的速度（數(shù)字）來動(dòng)態(tài)改變計(jì)速表的指針。使用也非常簡單，下面給出方法。2015-08-08
js實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)瀑布流
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)瀑布流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript定義數(shù)組的三種方法(new Array(),new Array(''x'',''y'')
下面小編就為大家?guī)硪黄狫avaScript定義數(shù)組的三種方法(new Array(),new Array('x','y')。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
JS前端開發(fā)之exec()和match()的對比使用
match()方法可在字符串內(nèi)檢索指定的值,或找到一個(gè)或多個(gè)正則表達(dá)式的匹配,下面這篇文章主要給大家介紹了關(guān)于JS前端開發(fā)之exec()和match()的對比使用的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了微信小程序 wepy框架與iview-weapp的用法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
詳解關(guān)于html，css，js三者的加載順序問題
這篇文章主要介紹了關(guān)于html，css，js三者的加載順序問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
對于javascript來說，數(shù)組是一種引用類型，如果只是一維數(shù)組的話，復(fù)制還較為容易，如果是多維數(shù)組呢？如何實(shí)現(xiàn)多維數(shù)組的深度復(fù)制？2017-02-02
js禁止查看源文件屏蔽Ctrl+u/s、F12、右鍵等兼容IE火狐c(diǎn)hrome
最近想給JS特效與模板預(yù)覽頁面加上屏蔽查看源文件，防治整理不易的源碼被輕易拿走，發(fā)現(xiàn)IE、火狐、chrome等各類瀏覽器支持不一樣。下面是腳本之家整理的一些屏蔽總結(jié)2020-10-10
下面小編就為大家?guī)硪黄猠asyui-datagrid特殊字符不能顯示的處理方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了js tab欄切換代碼實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09