省市联动(jq和mui)

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

posted @ 2019-08-15 10:38  *沧海一粟*  阅读(256)  评论(0编辑  收藏  举报