前端使用 distpicker 实现省市区的三级联动选择

最新推荐文章于 2024-08-08 07:45:57 发布

夏侯_瑾轩

最新推荐文章于 2024-08-08 07:45:57 发布

阅读量3.1k

点赞数 1

文章标签：省市区三级联动 distpicker

本文链接：https://blog.csdn.net/baidu_24545901/article/details/81138769

版权

不多说，直接上代码

首先需要导入三个js 文件

页面如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

		<script type="text/javascript" src="js/province/distpicker.data.js"></script>
		<script type="text/javascript" src="js/province/distpicker.js"></script>
		<script language="JavaScript">
	
    
    $(function(){
    	
    	 /*城市选择控件*/
	    $("#distpicker1").distpicker();
	    /*
	    $("#distpicker1").distpicker({
	        province: a,
	        city: b,
	        district: c,
	        autoSelect: true,
	    	placeholder: false
	    });
    	*/
    	
    	
    	
    })
   

	function refreshAAA(){
		console.log( $("#province").val() );
		alert($("#province").val());
	}
	
	
		</script>
		
	</head>
	
	<body>
		
		 <div id="distpicker1">
                    <select id="province" name="province" class="select" style="width:180px;height:31px;" onchange="refreshAAA()"></select>
                    <select id="city" name="city" class="select" style="width:180px;height:31px;" onchange="refreshAAA()"></select>
                    <select id="district" name="district" class="select" style="width:180px;height:31px;" onchange="refreshAAA()"></select>
                </div>
		
	</body>
	
	
</html>