使用json数据实现简单的三级联动
2017-05-19 00:23
597 查看
json数据格式:
var data = {
"province": ["广东省","广东省","广东省","广东省","广东省","广东省","广东省"],
"city":{
"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
"山东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"]
},
"shop": {
"韶关市":{
"101":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"102":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"103":{
"name": "韶关大店",
"address":"韶关市吴江区"
}
},
"广州市":{
"104":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"105":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"106":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"107":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"108":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"109":{
"name": "韶关大店",
"address":"韶关市吴江区"
}
},
"深圳市":{
"110":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"111":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"112":{
"name": "韶关大店",
"address":"韶关市吴江区"
}
},
}
}HTML代码:
<div class="select">
<select name="" id="province">
<option value="">省</option>
</select>
<select name="" id="city">
<option value="">市</option>
</select>
<select name="" id="shop">
<option value="">门店</option>
</select>
</div>
js代码:
var data = {
"province": ["广东省","广东省","广东省","广东省","广东省","广东省","广东省"],
"city":{
"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
"山东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
"广东省":["韶关市","韶关市","韶关市","韶关市","韶关市"]
},
"shop": {
"韶关市":{
"101":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"102":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"103":{
"name": "韶关大店",
"address":"韶关市吴江区"
}
},
"广州市":{
"104":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"105":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"106":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"107":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"108":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"109":{
"name": "韶关大店",
"address":"韶关市吴江区"
}
},
"深圳市":{
"110":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"111":{
"name": "韶关大店",
"address":"韶关市吴江区"
},
"112":{
"name": "韶关大店",
"address":"韶关市吴江区"
}
},
}
}HTML代码:
<div class="select">
<select name="" id="province">
<option value="">省</option>
</select>
<select name="" id="city">
<option value="">市</option>
</select>
<select name="" id="shop">
<option value="">门店</option>
</select>
</div>
<div class="store"> <p id="shop_1"></p> <p><span id="txt1"></span><span id="shop_address"></span></p> <p id="txt2">赶紧点击上方查找门店吧!</p> </div>
js代码:
//数据传进来之前就给省框option赋值 postJsonData('http://pj.dianmila.com/colgate/children_api.php?a=area_list',{ name: '' },function(data){ if( data.state == 1 ){ var Pro1 = ''; for( var i=0; i<data.province.length; i++){ var Pro = '<option value="">'+ data.province[i] +'</option>'; Pro1 += Pro; } $('#province').append(Pro1); //监听省的变化,然后显示相应的市区 $('#province').on('change',function(){ var oCity = document.getElementById('city'); oCity.innerHTML = '<option>市</option>'; var City1 = ''; var City2 = $('#province').children('option:selected').text();//获取到被选中的option省份值 for( var city_1 in data.city ){//city_1代表了city里面的所有属性名即省份名称 if( City2 == city_1 ){//如果上方循环道德属性名和获取到被选中的省份名一样就进入这个省份下的城市列表去去全部值出来 for( var i=0; i<data.city[city_1].length; i++){//这边一定要使用索引了,如果还是用键值是实现不了的 var City3 = '<option value="">'+ data.city[city_1][i] +'</option>'; City1 += City3; } $('#city').append(City1); } } }); 4000 //监听市的变化,然后显示相应的门店 $('#city').on('change',function(){ var oShop = document.getElementById('shop'); oShop.innerHTML = '<option>门店</option>'; var Shop = ''; var Shop2 = $('#city').children('option:selected').text(); for( var shop_1 in data.shop ){//shop_1代表了shop里面的所有属性名即城市名称 if( Shop2 == shop_1 ){ for( var m in data.shop[shop_1]){//m代表了城市里面的所有属性名即'101'这些,下方取值也是用索引 var Shop1 = '<option value="">'+ data.shop[shop_1][m].name +'</option>'; Shop += Shop1; } $('#shop').append(Shop); } } }); //监听门店的变化,然后下方显示相应的内容 $('#shop').on('change',function(){ var Shop = ''; var Shop2 = $('#city').children('option:selected').text(); var Shop3 = $('#shop').children('option:selected').text(); $('#txt1').text('门店地址:'); $('#txt2').text('赶快来参加活动吧!'); for( var shop_1 in data.shop ){ if( Shop2 == shop_1 ){ for( var m in data.shop[shop_1]){ if( Shop3 == data.shop[shop_1][m].name ){//当被选中的门店名称和循环到的门店相等的时候赋值 $('#shop_1').text(Shop3); $('#shop_address').text(data.shop[shop_1][m].address); } } $('#shop').append(Shop); } } }); }/*else if(data.state == 3){ if(confirm("你确定登陆么?") ){ window.location.href= 'http://pj.dianmila.com/lamsoon/bakeryExpo2017_api.php?a=init&from=1'; }else { // 留在本页面 } } */ },null,"send_data");
相关文章推荐
- 使用JQUERY实现JSON数据三级联动
- 使用JDBC获取数据库数据,并生成json格式文件(省市区三级联动)
- wheel自定义控件,实现城市三级联动,时间选择的功能简单使用
- Json解析较为复杂的数据(Map中含有List)从服务器获取城市数据实现三级联动
- javascript实现省市区三级联动选择的代码(数据为模拟json数据)
- JSON 数据,实现省市县三级联动下拉菜单
- android json解析使用总结(三) — 三级城市联动的实现
- wheel自定义控件,实现城市三级联动,时间选择的功能简单使用
- 使用基于Android网络通信的OkHttp库实现Get和Post方式简单操作服务器JSON格式数据
- php jquery ajax json 全国省市区三级联动下拉列表 简单实现
- php jquery ajax json 全国省市区三级联动下拉列表 简单实现
- php jquery ajax json 全国省市区三级联动下拉列表 简单实现
- 读取本地json数据实现省市区三级联动PickerView
- 使用listview实现简单的三级地址联动选择器
- jquery从数据库中获取数据装换成json数据实现三级联动
- Unity 使用JSON实现本地数据保存和读取
- JAVA 简单使用JDBC实现连接数据
- Python使用shelve模块实现简单数据存储的方法
- Android使用android-wheel实现省市县三级联动
- java对象和json数据转换实现方式3-使用jackson实现