JSON+Jquery省市區(qū)三級(jí)聯(lián)動(dòng)
效果圖如下所示:

廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
<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>
本段代碼比較簡(jiǎn)單,實(shí)用性也非常高,希望本文所述對(duì)大家有所幫助。
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單
- 省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單javascript版
- js實(shí)現(xiàn)一個(gè)省市區(qū)三級(jí)聯(lián)動(dòng)選擇框代碼分享
- 從QQ網(wǎng)站中提取的純JS省市區(qū)三級(jí)聯(lián)動(dòng)菜單
- 原生js實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)代碼分享
- vue.js模仿京東省市區(qū)三級(jí)聯(lián)動(dòng)的選擇組件實(shí)例代碼
- javascript實(shí)現(xiàn)簡(jiǎn)單的省市區(qū)三級(jí)聯(lián)動(dòng)
- javascript省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例演示
- js實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)非select下拉框版
相關(guān)文章
各式各樣的導(dǎo)航條效果css3結(jié)合jquery代碼實(shí)現(xiàn)
這篇文章主要為大家分享了css3結(jié)合jquery代碼實(shí)現(xiàn)各式各樣的導(dǎo)航條效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09
分享10篇優(yōu)秀的jQuery幻燈片制作教程及應(yīng)用案例
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架,使用簡(jiǎn)單靈活,同時(shí)還有許多成熟的插件可供選擇,它可以幫助你在項(xiàng)目中加入一些非常好的效果。2011-04-04
基于jquery的關(guān)于動(dòng)態(tài)創(chuàng)建DOM元素的問題
在我們實(shí)際的項(xiàng)目之中,相信有很多的朋友直接使用了以下的格式創(chuàng)建DOM元素。2010-12-12
jQuery動(dòng)態(tài)添加的元素綁定事件處理函數(shù)代碼
有一段時(shí)間沒用jquery了,今天又碰到這個(gè)問題。當(dāng)時(shí)是知道有l(wèi)ivejquery可以解決。但是我并不喜歡為了這個(gè)而另外加載一個(gè)。2011-08-08
jquery validate和jquery form 插件組合實(shí)現(xiàn)驗(yàn)證表單后AJAX提交
在ajax流行的時(shí)代,好像很少能看見傳統(tǒng)的同步提交表單方式了,是啊我們當(dāng)然要用更加給力的AJAX來實(shí)現(xiàn)異步無刷新提交表單,好了開始今天的jQuery之旅吧,今天我們來利用jquery.validate和jquery.form 插件組合實(shí)現(xiàn)驗(yàn)證表單后AJAX提交 ,需要的朋友可以參考下2015-08-08
jQuery 文本框得失焦點(diǎn)的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jQuery 文本框得失焦點(diǎn)的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02

