级联的两种写法
1.从接口获取数据：
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>'); }; } }) }) } }); }); } }); }
2.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>
