您的位置：首页 > Web前端 > JQuery

省市区地址三级联动jQuery插件Distpicker使用

2017-12-08 21:06 686 查看
插件下载地址

http://www.jq22.com/jquery-info8054

效果如下:



使用:

1.引入js

<script src="http://www.jq22.com/jquery/1.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="http://www.jq22.com/jquery/1.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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript jquery Distpicker 省市区地址三级联动
相关文章推荐
新的分享
章节导航