jquery基于layui實現(xiàn)二級聯(lián)動下拉選擇(省份城市選擇)
更新時間：2017年06月20日 16:02:42 作者：滔哥
本篇文章主要介紹了jquery基于layui實現(xiàn)二級聯(lián)動下拉選擇(省份城市選擇)，具有一定的實用價值，需要的朋友可以參考下
先看一下簡單的效果
直接上代碼
html部分 (下拉框中value的數(shù)值我是根據(jù)數(shù)據(jù)庫中取出來)
<div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <select name="city" lay-filter="province"> <option value=""></option> <option value="11">北京市</option> <option value="12">天津市</option> <option value="13">河北省</option> <option value="14">山西省</option> <option value="15">內(nèi)蒙古自治區(qū)</option> <option value="21">遼寧省</option> <option value="22">吉林省</option> <option value="23">黑龍江省</option> <option value="31">上海市</option> <option value="32">江蘇省</option> <option value="33">浙江省</option> <option value="34">安徽省</option> <option value="35">福建省</option> <option value="36">江西省</option> <option value="37">山東省</option> <option value="41">河南省</option> <option value="42">湖北省</option> <option value="43">湖南省</option> <option value="44">廣東省</option> <option value="45">廣西壯族自治區(qū)</option> <option value="46">海南省</option> <option value="50">重慶市</option> <option value="51">四川省</option> <option value="52">貴州省</option> <option value="53">云南省</option> <option value="54">西藏自治區(qū)</option> <option value="61">陜西省</option> <option value="62">甘肅省</option> <option value="63">青海省</option> <option value="64">寧夏回族自治區(qū)</option> <option value="65">新疆維吾爾自治區(qū)</option> <option value="71">臺灣省</option> <option value="81">香港特別行政區(qū)</option> <option value="82">澳門特別行政區(qū)</option> </select> </div> <div class="layui-input-inline"> <select name="city" id="city"> <option value=""></option> </select> </div> </div>
js操作部分
form.on('select(province)', function(data){
$.getJSON("/api/getCity?pid="+data.value, function(data){
var optionstring = "";
$.each(data.data, function(i,item){
optionstring += "<option value=\"" + item.code + "\" >" + item.name + "</option>";
});
$("#city").html('<option value=""></option>' + optionstring);
form.render('select'); //這個很重要
});
});
后臺返回的數(shù)據(jù)格式json
{
"status": 200,
"message": "result",
"data": [
{
"code": "3418",
"name": "宣城市",
"province": "34"
},
{
"code": "3417",
"name": "池州市",
"province": "34"
},
{
"code": "3416",
"name": "亳州市",
"province": "34"
},
{
"code": "3415",
"name": "六安市",
"province": "34"
},
{
"code": "3413",
"name": "宿州市",
"province": "34"
},
{
"code": "3412",
"name": "阜陽市",
"province": "34"
},
{
"code": "3411",
"name": "滁州市",
"province": "34"
},
{
"code": "3408",
"name": "安慶市",
"province": "34"
},
{
"code": "3407",
"name": "銅陵市",
"province": "34"
},
{
"code": "3406",
"name": "淮北市",
"province": "34"
},
{
"code": "3405",
"name": "馬鞍山市",
"province": "34"
},
{
"code": "3404",
"name": "淮南市",
"province": "34"
},
{
"code": "3403",
"name": "蚌埠市",
"province": "34"
},
{
"code": "3402",
"name": "蕪湖市",
"province": "34"
},
{
"code": "3401",
"name": "合肥市",
"province": "34"
}
]
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
jQuery插件FusionCharts實現(xiàn)的2D柱狀圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts實現(xiàn)的2D柱狀圖效果,結合完整實例形式分析了FusionCharts插件繪制2D柱狀圖的實現(xiàn)步驟與相關屬性設置技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jquery實現(xiàn)帶漸變淡入淡出并向右依次展開的多級菜單效果實例
這篇文章主要介紹了jquery實現(xiàn)帶漸變淡入淡出并向右依次展開的多級菜單效果,涉及jquery鼠標事件及頁面元素動態(tài)樣式設置的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jquery讓指定的元素閃爍顯示的方法,涉及jQuery操作css樣式的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
下面小編就為大家?guī)硪黄狣IV隨滾動條滾動而滾動實現(xiàn)代碼【推薦】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-04-04
JQuery AJAX 中文亂碼問題解決，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了使用jQuery獲取元素父節(jié)點的方法,通俗易懂,需要的朋友可以參考下。2016-06-06
這篇文章主要介紹了jQuery 控制文本框自動縮小字體填充的相關資料,需要的朋友可以參考下2017-06-06
Jquery實現(xiàn)無刷新DropDownList聯(lián)動實現(xiàn)代碼
隨著Jquery1.4的發(fā)布，Jquery運用越來越多了，讓我們來實現(xiàn)以前經(jīng)常用到的DropDownList無刷新聯(lián)動。2010-03-03
實現(xiàn)easyui的datagrid導出為excel的示例代碼
下面小編就為大家?guī)硪黄獙崿F(xiàn)easyui的datagrid導出為excel的示例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了jQuery實現(xiàn)簡單隔行變色的方法,涉及jQuery針對頁面元素樣式的相關操作技巧,需要的朋友可以參考下2016-02-02