省市级联的三种写法-CSDN博客

从接口获取数据：


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'
				}
			]		
		}
	}]

转载于:https://www.cnblogs.com/kymming/p/6405562.html