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