js省市區(qū)級聯(lián)查詢（插件版&無插件版）
更新時間：2017年03月21日 16:08:20 作者：zt_fucker
這篇文章主要為大家詳細介紹了js省市區(qū)級聯(lián)查詢，包括插件版和無插件版，具有一定的參考價值，感興趣的小伙伴們可以參考一下
實現(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>
相關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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
ES6中Proxy與Reflect實現(xiàn)重載(overload)的方法
這篇文章主要介紹了ES6中Proxy與Reflect實現(xiàn)重載(overload)的方法,分析了重載的原理及使用Proxy和Reflect來實現(xiàn)重載的操作步驟與相關技巧,需要的朋友可以參考下2017-03-03
下面小編就為大家?guī)硪黄褂眠f歸遍歷對象獲得value值的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
Bootstrap編寫一個兼容主流瀏覽器的受眾巨幕式風格頁面
這篇文章主要介紹了Bootstrap編寫一個兼容IE8、谷歌等主流瀏覽器的受眾巨幕式風格頁面，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家介紹了如何使用瀏覽器擴展篡改網(wǎng)頁中的JS文件實現(xiàn)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
在前不久做的一個web項目中，需要實現(xiàn)js表格排序的效果，當時為了省事，就在網(wǎng)上找了幾個相關的js插件2011-10-10
微信小程序textarea層級過高(蓋住其他元素)問題的解決辦法
這篇文章主要給大家介紹了關于微信小程序textarea層級過高(蓋住其他元素)問題的解決辦法，文中通過圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
Promise大家一定都不陌生了,JavaScript異步流程從最初的Callback,到Promise,到Generator,再到目前使用最多的Async/Await,下面這篇文章主要給大家介紹了關于Promise基本方法的簡單實現(xiàn),需要的朋友可以參考下2022-02-02
JavaScript使用小插件實現(xiàn)倒計時的方法講解
今天小編就為大家分享一篇關于JavaScript使用小插件實現(xiàn)倒計時的方法講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03
在制作前端頁面的過程中,經(jīng)常需要用到JavaScript進行邏輯處理,很多時候都需要對字符串進行操作,這篇文章主要給大家介紹了關于JavaScript字符串操作的四個實用技巧,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了JS實現(xiàn)的透明度漸變動畫效果,涉及javascript響應鼠標事件針對頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-04-04