省市区地址三级联动jQuery插件Distpicker使用"/>
省市区地址三级联动jQuery插件Distpicker使用
插件下载地址
效果如下:
使用:
1.引入js
<script src=".11.1/jquery.min.js"></script>
<script src="js/distpicker.data.js"></script>
<script src="js/distpicker.js"></script>
<script src="js/main.js"></script>
2.根据demo示例,写div
<div data-toggle="distpicker">
<select id="eprovinceName" data-province="浙江省" name="provinceName"></select>
<select id="ecityName" data-city="杭州市" name="cityName"></select>
<select id="edistrictName" data-district="西湖区" name="districtName"></select>
</div>
3.用户选择值value的获取
<script>
$("#tijiao").click(function(){
var province = $("#eprovinceName").find("option:selected").text();
var city = $("#ecityName").find("option:selected").text();
var district = $("#edistrictName").find("option:selected").text();
console.log(province);
console.log(city);
console.log(district);
});
</script>
完整代码如下:
<!DOCTYPE html>
<html lang="zh"><body>
<div data-toggle="distpicker"><select id="eprovinceName" data-province="浙江省" name="provinceName"></select><select id="ecityName" data-city="杭州市" name="cityName"></select><select id="edistrictName" data-district="西湖区" name="districtName"></select>
</div> <input type='button' value="提交" id='tijiao'>
</body> <script src=".11.1/jquery.min.js"></script>
<script src="js/distpicker.data.js"></script>
<script src="js/distpicker.js"></script>
<script src="js/main.js"></script>
<script>$("#tijiao").click(function(){var province = $("#eprovinceName").find("option:selected").text(); var city = $("#ecityName").find("option:selected").text(); var district = $("#edistrictName").find("option:selected").text(); console.log(province);console.log(city);console.log(district);});
</script>
</html>特别注意:提交表单是,不需要上面那么麻烦
直接在select上加name属性即可
<select data-province="北京市" class="select" name="province"></select>
<select data-city="北京市市辖区" class="select" name="city"></select>
<select data-district="顺义区" class="select" name="district"></select>
更多推荐
省市区地址三级联动jQuery插件Distpicker使用
发布评论