JSON+Jquery省市區(qū)三級(jí)聯(lián)動(dòng)
效果圖如下所示:
廢話不多說(shuō)了,直接給大家貼代碼了,具體代碼如下所示:
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--讀取數(shù)據(jù)庫(kù),以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元素的問(wèn)題
在我們實(shí)際的項(xiàng)目之中,相信有很多的朋友直接使用了以下的格式創(chuàng)建DOM元素。2010-12-12jQuery動(dòng)態(tài)添加的元素綁定事件處理函數(shù)代碼
有一段時(shí)間沒用jquery了,今天又碰到這個(gè)問(wèn)題。當(dāng)時(shí)是知道有l(wèi)ivejquery可以解決。但是我并不喜歡為了這個(gè)而另外加載一個(gè)。2011-08-08jquery validate和jquery form 插件組合實(shí)現(xiàn)驗(yàn)證表單后AJAX提交
在ajax流行的時(shí)代,好像很少能看見傳統(tǒng)的同步提交表單方式了,是啊我們當(dāng)然要用更加給力的AJAX來(lái)實(shí)現(xiàn)異步無(wú)刷新提交表單,好了開始今天的jQuery之旅吧,今天我們來(lái)利用jquery.validate和jquery.form 插件組合實(shí)現(xiàn)驗(yàn)證表單后AJAX提交 ,需要的朋友可以參考下2015-08-08jQuery 文本框得失焦點(diǎn)的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jQuery 文本框得失焦點(diǎn)的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02