码迷,mamicode.com
首页 > 其他好文 > 详细

省市联动(jq和mui)

时间:2019-08-15 11:00:39      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:eve   var   cti   百度云   lse   cal   mui   dev   htm   

1.jq的distpicker省市联动

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>地区三级联动</title>
</head>
<body>
<div class="container-fluid" >
    <div class="row form-inline" style="margin:20px;">
        <div id="disSelect">
            <label class="control-label">测有默认值</label>
            <select class="form-control" id="province" data-province="四川省"></select>
            <select class="form-control" id="city" data-city="成都市"></select>
            <select class="form-control" id="county" data-county="龙泉驿区"></select>
        </div>
    </div>
    <div class="row form-inline" style="margin:20px;">
        <div class="form-inline">
            <div id="disSelect2">
                <label class="control-label">无默认值</label>
                <select class="form-control" id="province1"></select>
                <select class="form-control" id="city1"></select>
                <select class="form-control" id="county1"></select>
            </div>
        </div>

    </div>
</div>
<script src="jquery-3.2.1.js"></script>
<script src="distpicker.js"></script>
<script type="text/javascript">
    $(function() {
        $("#disSelect").distpicker();
        $("#disSelect2").distpicker();
    });

</script>
</body>

</html>

注:distpicker.js 百度云https://pan.baidu.com/s/1KooBBwn9wxw71Wg_Rl1O2w 提取码:oszt

2.mui的省市联动

<div class="mui-table-view-cell weidai" id="addressCities"><span id="">位置:</span><input class="disab" type="text" id="addressCitiestext"></div>
   document.getElementById(‘addressCities‘).addEventListener(‘tap‘,function () {
                   var addressStr="";
                    var picker=new mui.PopPicker({
                        layer:3
                    });
                    picker.setData(cityData3);
                    picker.show(function(selectItems){
                        if(selectItems[0].text==selectItems[1].text){
                            addressStr=selectItems[1].text+selectItems[2].text
                        }else if(selectItems[2].text==undefined){
                            addressStr=selectItems[0].text+selectItems[1].text
                        }else{
                            addressStr=selectItems[0].text+selectItems[1].text+selectItems[2].text
                        }
                        $("#addressCitiestext").val(addressStr);
                        
                    });
                

            });                

注:mui的要引入 city.data-3.js (mui.js  picker.js 是必须引入的的)百度云https://pan.baidu.com/s/1887vOx2vdMLlPFjXajYfYg 提取码:ej52

省市联动(jq和mui)

标签:eve   var   cti   百度云   lse   cal   mui   dev   htm   

原文地址:https://www.cnblogs.com/zyb-722/p/11356488.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!