js区域三级联动

基于jq的js插件

// HTML部分
<select class="prov" id="prov"  name="prov"><option value="">省份</option></select>
<select class="city" id="city" name="city" ><option value="">城市</option></select>
<select name="dist" id="dist" class="dist"><option value="">县/区</option></select>

// js部分
$(function(){
    var p = $('#prov');
    var c = $('#city');
    var d = $('#dist');
    
    for(var i in provincesNAME)
    {
    	var name = provincesNAME[i];
    	var id = provincesID[i];
    	$('<option/>',{value:id,"html":name}).appendTo(p)
    
    }
    
    p.on('change',function(){
    	pid = p.val();
    
    	c.html('<option value="">城市</option>');
    	if(!pid)
    	{
    		return
    	}
    
    	if(pid in citysID)
    	{
    		for(var i in citysID[pid])
    		{
    			var name = citysNAME[pid][i];
    			var id = citysID[pid][i];
    			$('<option/>',{value:id,"html":name}).appendTo(c)
    
    		}
    	}
    	c.trigger('change');
    });
    c.on('change',function(){
    	cid = c.val();
    	d.html('<option value="">县/区</option>');
    	if(!cid){
    		return
    	}
    
    	if(cid in countysID){
    		for(var i in countysID[cid]){
    			var name  = countysNAME[cid][i];
    			var id = countysID[cid][i];
    			$('<option/>',{value:id,"html":name}).appendTo(d);
    		}
    	}
    })
});

使用就是这么简单

js下载地址https://download.csdn.net/download/weixin_41100576/10660117