省市联动（jq和mui）
Posted zyb-722
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了省市联动（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
以上是关于省市联动（jq和mui）的主要内容，如果未能解决你的问题，请参考以下文章