快捷導(dǎo)航

JSON+Jquery省市區(qū)三級(jí)聯(lián)動(dòng)

更新時(shí)間：2016年01月13日 14:48:04 作者：zhangjf_兔子

這篇文章主要介紹了JSON+Jquery省市區(qū)三級(jí)聯(lián)動(dòng)的相關(guān)資料,需要的朋友可以參考下

效果圖如下所示：

廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：

<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--讀取數(shù)據(jù)庫，以json的格式輸出，然后復(fù)制json數(shù)據(jù)，創(chuàng)建js文件--> 
<script src="json/CityJson.js" type="text/javascript"></script>
<script src="json/ProJson.js" type="text/javascript"></script>
<script src="json/DistrictJson.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.each(province, function (k, p) { 
var option = "<option value='" + p.ProID + "'>" + p.ProName + "</option>";
$("#selProvince").append(option);
});
$("#selProvince").change(function () {
var selValue = $(this).val(); 
$("#selCity option:gt(0)").remove();
$.each(city, function (k, p) { 
if (p.ProID == selValue) {
var option = "<option value='" + p.CityID + "'>" + p.CityName + "</option>";
$("#selCity").append(option);
}
});
});
$("#selCity").change(function () {
var selValue = $(this).val();
$("#selDistrict option:gt(0)").remove(); 
$.each(District, function (k, p) {
if (p.CityID == selValue) {
var option = "<option value='" + p.Id + "'>" + p.DisName + "</option>";
$("#selDistrict").append(option);
}
}); 
}); 
});
</script>
</head>
<body>
<select id="selProvince">
<option value="0">--請(qǐng)選擇省份--</option>
</select>
<select id="selCity">
<option value="0">--請(qǐng)選擇城市--</option>
<option>aaaa</option>
<option>aaaa</option>
</select>
<select id="selDistrict">
<option value="0">--請(qǐng)選擇區(qū)/縣--</option>
</select>
<input type="button" id="btnOK" value="確定" />
</body>
</html>

本段代碼比較簡單，實(shí)用性也非常高，希望本文所述對(duì)大家有所幫助。

您可能感興趣的文章:

相關(guān)文章

Jqgrid設(shè)置全選(選擇)及獲取選擇行的值示例代碼
本篇文章主要介紹了Jqgrid設(shè)置全選(選擇)及獲取選擇行的值示例代碼。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
jqTransform美化表單
本文為大家揭秘如何使表單更加美化，感興趣的小伙伴們可以參考一下
2015-10-10
jQuery插件Easyui設(shè)置datagrid的pageNumber導(dǎo)致兩次請(qǐng)求問題的解決方法
這篇文章主要介紹了jQuery插件Easyui設(shè)置datagrid的pageNumber導(dǎo)致兩次請(qǐng)求問題的解決方法,較為詳細(xì)的描述了出現(xiàn)的問題、問題的原因及相應(yīng)的解決方法,需要的朋友可以參考下
2016-08-08
jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
jQuery zoom是一款能夠查看相冊大圖的jQuery彈出層插件，點(diǎn)擊相冊的縮略圖，就會(huì)彈出該相片對(duì)應(yīng)的大圖，并且?guī)в袀€(gè)性的加載動(dòng)畫，還有上一張下一張按鈕以及關(guān)閉按鈕。使用方法非常簡單。兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等瀏覽器。
2015-04-04
jQuery檢測某個(gè)元素是否存在代碼分享
本文給大家講解的是使用jQuery檢測某個(gè)元素是否存在的代碼和思路，十分的實(shí)用，有需要的小伙伴可以參考下。
2015-07-07
jQuery操作input type=radio的實(shí)現(xiàn)代碼
jQuery操作input type=radio的實(shí)現(xiàn)代碼，需要的朋友可以參考下
2012-06-06
利用jQuery來動(dòng)態(tài)為屬性添加或者刪除屬性的簡單方法
下面小編就為大家?guī)硪黄胘Query來動(dòng)態(tài)為屬性添加或者刪除屬性的簡單方法。小編覺的挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-12-12
jquery 根據(jù)name名獲取元素的value值
這里給大家分享的是一個(gè)網(wǎng)友咨詢的關(guān)于jQuery獲取name名的value值的問題，感覺很具有普遍性，所以記錄下來，希望對(duì)大家能有所幫助。
2015-02-02
喜大普奔！jQuery發(fā)布 3.0 最終版
jQuery發(fā)布已經(jīng)十年了，挺讓人難以置信。過去的這些年Web開發(fā)變了很多，jQuery也隨之變化著。在這個(gè)過程中，團(tuán)隊(duì)一直在對(duì)確保過往代碼的兼容支持和獲取最好的Web開發(fā)實(shí)踐的現(xiàn)實(shí)之間努力著。就在2天前，jQuery發(fā)布了新的3.0最終版本
2016-06-06
jQuery+ajax實(shí)現(xiàn)動(dòng)態(tài)執(zhí)行腳本的方法
這篇文章主要介紹了jQuery+ajax實(shí)現(xiàn)動(dòng)態(tài)執(zhí)行腳本的方法,分析了jQuery+Ajax實(shí)現(xiàn)腳本的動(dòng)態(tài)加載與執(zhí)行的技巧,需要的朋友可以參考下
2015-01-01