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

待我称王封你为后i 2022-06-04 08:36 223阅读 0赞

插件下载地址

[http://www.jq22.com/jquery-info8054][http_www.jq22.com_jquery-info8054]

效果如下:

![Center][]

使用:

1.引入js

2.根据demo示例,写div

3.用户选择值value的获取

完整代码如下:

<!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属性即可**

[http_www.jq22.com_jquery-info8054]: http://www.jq22.com/jquery-info8054
[Center]: /images/20220604/3c079c5921c8400499809171a0804df9.png