从接口获取数据:
function selectfun() { $.ajax({ type: "GET", url: "/location/provinces", data: {}, dataType: "json", cache: false, error: function(a, b, c) {}, success: function(a) { var length = a.length; $('#province').html('<option>请选择</option>'); for (var i = 0; i < length; i++) { $('#province').append('<option value="' + a[i].provinceId + '">' + a[i].provinceName + '</option>'); }; //第一级 $('#province').change(function() { var index = $('#province option:selected').val(); //第二级 $.ajax({ type: "GET", url: "/location/cities?data", data: { "action": "cityId", 'provinceId': index }, dataType: "json", cache: false, error: function(a, b, c) {}, success: function(a) { var length = a.length; $('#city').html('<option>请选择</option>'); for (var i = 0; i < length; i++) { $('#city').append('<option value="' + a[i].cityId + '">' + a[i].cityName + '</option>'); }; $("#city").change(function() { var i = $('#city option:selected').val(); //第三级 $.ajax({ type: "GET", url: "/location/districts?data", data: { "action": "districtId", 'cityId': i }, dataType: "json", cache: false, error: function(a, b, c) {}, success: function(a) { var length = a.length; $('#area').html('<option>请选择</option>'); for (var i = 0; i < length; i++) { console.log(a[i].cityId); $('#area').append('<option value="' + a[i].districtId + '">' + a[i].districtName + '</option>'); }; } }) }) } }); }); } }); }
mui框架:
<!--html部分-->
<html>
<button id='showUserPicker' class="mui-btn mui-btn-block" type='button' style='width:82%;text-align:left;float:none;border:none;padding-left:0;padding-top:14px;color:#999;font-size:14px'>请选择银行</button>
<input id='userResult' type="hidden"></input>
<div class="mui-input-row line50">
<label class="mui-icon iconfont icon-xiangmumiaoshu f20 w18"></label>
<button id='showCityPicker' class="mui-btn mui-btn-block" type='button' style='width:82%;text-align:left;float:none;border:none;padding-left:0;padding-top:14px;color:#999;font-size:14px'>请选择省市</button>
<input id='cityResult' type="hidden">
</div>
</html>
<!--js部分-->
<script>
(function(jq, doc) {
jq.init();
jq.ready(function() {
//选择银行
var userPicker = new jq.PopPicker();
userPicker.setData(
[{
value: 'PSBC', text: '邮政银行'
}, {
value: 'ABC', text: '农业银行'
}, {
value: 'BOC', text: '中国银行'
}, {
value: 'CCB', text: '建设银行'
}, {
value:'ICBC', text: '工商银行'
}, {
value: 'CMB', text: '招商银行'
}, {
value: 'CITIC', text: '中信银行'
}, {
value: 'CMBC', text: '民生银行'
}, {
value: 'CIB', text: '兴业银行'
}, {
value: 'CEB', text: '光大银行'
}, {
value: 'CGB', text: '广发银行'
}, {
value: 'SZPAB', text: '平安银行'
}, {
value: 'BOS', text: '上海银行'
}, {
value: 'COMM', text: '交通银行'
}
]);
var showUserPickerButton = doc.getElementById('showUserPicker');
var userResult = doc.getElementById('userResult');
var a;
showUserPickerButton.addEventListener('tap', function(event){
userPicker.show(function(items) {
userResult.val = items[0].text;
userResult.name= items[0].value;
showUserPicker.innerText = userResult.val;
//返回 false 可以阻止选择框的关闭
//return false;
});
}, false);
//级联示例
var cityPicker = new jq.PopPicker({ layer: 2});
cityPicker.setData(cityData);
var showCityPickerButton = doc.getElementById('showCityPicker');
var cityResult = doc.getElementById('cityResult');
showCityPickerButton.addEventListener('tap', function(event) {
cityPicker.show( function(items) {
cityResult.val= items[0].text + " " + items[1].text;
//返回 false 可以阻止选择框的关闭
//return false;
showCityPickerButton.innerText = cityResult.val;
} );
}, false);
})
})
</script>
json数组
window.LocalList = [ {
region:
{
name:'北京市',
code:'11',
state:[
{
name:'北京',
code:'01',
city:[
{
name:'东城区',
code:'01'
},
{
name:'西城区',
code:'02'
},
{
name:'崇文区',
code:'03'
},
{
name:'宣武区',
code:'04'
},
{
name:'朝阳区',
code:'05'
},
{
name:'丰台区',
code:'06'
}, {
name:'石景山区',
code:'07'
}, {
name:'海淀区',
code:'08'
}
]
}
}]