jQuery中国省城厢地址三级联动插件

jQuery中国省市区地址三级联动插件
第一次使用Distpicker.js，过程中也遇到许多问题，在解决完之后，拿出来分享给大家，希望可以帮助到朋友
第一步：如果如何使用，在项目中引入Distpicker.js

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <!-- 先引入jquery ,文件路径参考自己的项目-->
        <script type="text/javascript" src="/js/jquery.min.js"></script>
        <script type="text/javascript" src="/js/distpicker.js"></script>  
    </head>
    <body>
    	<div data-toggle="distpicker" id="distpicker" >  
	      <select province="省" name='province' ></select>  
	      <select city="市 " name="city" ></select>  
	      <select district="区" name="district"></select>  
	    </div>  
 	</body>
 	<script>
 		$(function(){
 			//调用distpicker.js
 			$("#distpicker").distpicker();
 			
 			//如何获取省市区text 和code
 			$('select[name=province] option:selected').attr("data-text");
 			$('select[name=province] option:selected').attr("data-code");
 			
 			$('select[name=city] option:selected').attr("data-text");
 			$('select[name=city] option:selected').attr("data-code");
 			
 			$('select[name=district] option:selected').attr("data-text");
 			$('select[name=district] option:selected').attr("data-code");
 			
 			
 		//重复时加载必须先销毁
		$('#distpicker').distpicker('destroy');
		$('#distpicker').distpicker({
			  province: '广东省',	//省
			  city: '深圳市',	//市
			  district: '罗湖区'	//区
			});
 		});
		
 	</script>
</html>

jQuery中国省城厢地址三级联动插件

相关推荐