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

系统管理员 2022-05-19 05:24 582阅读 0赞

不多说，直接上代码

首先需要导入三个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>