从零开始SpringCloud Alibaba实战（52）——bootstrap-select多级联动下拉框

页面前端用的技术为bootstrap

做一个级联下拉框

效果

环境相关

bootstrap 3.3.7
jquery 3.3.1
bootstrap-select 1.13.9

数据表结构如下

-- 地址配置表(address_config)
create table address_config
(
	option_value varchar(20) not null comment '地址编号',
	parent_id varchar(60) not null comment '父级编号',
	option_text varchar(30) comment '地址描述',
	description varchar(100) comment '描述',
	primary key (option_value, parent_id)
) COMMENT='地址配置表';

-- 初始化数据
-- 广东省
insert into address_config values('广东省','PARENT','广东省','省份');

insert into address_config values('广州市','广东省','广州市','广东省市级');

insert into address_config values('天河区','广州市','天河区','广州市县或区');
insert into address_config values('长兴街道','天河区','长兴街道','天河区街道');
insert into address_config values('元岗街道','天河区','元岗街道','天河区街道');

insert into address_config values('海珠区','广州市','海珠区','广州市县或区');

-- 云南省
insert into address_config values('云南省','PARENT','云南省','省份');

insert into address_config values('昆明市','云南省','昆明市','云南省市级');
insert into address_config values('东川区','昆明市','东川区','昆明市县或区');
insert into address_config values('嵩明县','昆明市','嵩明县','昆明市县或区');

Mybatis配置如下

实体

package com.flashsale.model;

public class AddressConfig {
    /**
     * 地址编号
     */
    private String optionValue;

    /**
     * 父级编号
     */
    private String parentId;

    /**
     * 地址描述
     */
    private String optionText;

    /**
     * 描述
     */
    private String description;

    /**
     * 地址编号
     * @return option_value 地址编号
     */
    public String getOptionValue() {
        return optionValue;
    }

    /**
     * 地址编号
     * @param optionValue 地址编号
     */
    public void setOptionValue(String optionValue) {
        this.optionValue = optionValue;
    }

    /**
     * 父级编号
     * @return parent_id 父级编号
     */
    public String getParentId() {
        return parentId;
    }

    /**
     * 父级编号
     * @param parentId 父级编号
     */
    public void setParentId(String parentId) {
        this.parentId = parentId;
    }

    /**
     * 地址描述
     * @return option_text 地址描述
     */
    public String getOptionText() {
        return optionText;
    }

    /**
     * 地址描述
     * @param optionText 地址描述
     */
    public void setOptionText(String optionText) {
        this.optionText = optionText;
    }

    /**
     * 描述
     * @return description 描述
     */
    public String getDescription() {
        return description;
    }

    /**
     * 描述
     * @param description 描述
     */
    public void setDescription(String description) {
        this.description = description;
    }

	@Override
	public String toString() {
		return "AddressConfig [optionValue=" + optionValue + ", parentId=" + parentId + ", optionText=" + optionText
				+ ", description=" + description + "]";
	}
}

Mapper接口

import java.util.List;

import org.apache.ibatis.annotations.Param;

import com.flashsale.model.AddressConfig;

public interface AddressConfigMapper {
	
	List selectByParentId(String parentId);
}

Mapper.xml

	
		
		
		
		
	

	
		select option_value, option_text
		from address_config
		where parent_id = #{parentId}
		order by description, option_value
	

Service类

import java.util.List;

import org.apache.ibatis.annotations.Param;

import com.flashsale.model.AddressConfig;

public interface AddressConfigService {

	List selectByParentId(String parentId);
}

Service实现类

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.flashsale.mapper.AddressConfigMapper;
import com.flashsale.model.AddressConfig;
import com.flashsale.service.AddressConfigService;

@Service("addressConfigService")
public class AddressConfigServiceImpl implements AddressConfigService {
	@Autowired
	private AddressConfigMapper addressConfigMapper;

	@Override
	public List selectByParentId(String parentId) {
		return addressConfigMapper.selectByParentId(parentId);
	}
}

Controller类

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.flashsale.helper.JsonResult;
import com.flashsale.model.AddressConfig;
import com.flashsale.service.AddressConfigService;

@RestController
@RequestMapping("/address")
public class AddressConfigController {
	@Autowired
	private AddressConfigService addressConfigService;
	
	/**
	 * 根据父级加载地址初始化数据
	 * @param parentId
	 */
	@GetMapping("/{parentId}")
	public JsonResult selectByParentId(@PathVariable("parentId") String parentId) {
		return JsonResult.success(addressConfigService.selectByParentId(parentId));
	}
}

JsonResult类

package com.flashsale.helper;

import java.util.ArrayList;
import java.util.List;

public class JsonResult {
	// 状态
	private boolean success;

	// 错误码
	private String error;

	// 错误信息
	private String errorMessage;

	// 数据
	private List data = new ArrayList();

	// 数据总条数
	private Integer total = data != null ? data.size() : 0;

	public JsonResult() {
		super();
	}

	public boolean isSuccess() {
		return success;
	}

	public void setSuccess(boolean success) {
		this.success = success;
	}

	public String getError() {
		return error;
	}

	public void setError(String error) {
		this.error = error;
	}

	public String getErrorMessage() {
		return errorMessage;
	}

	public void setErrorMessage(String errorMessage) {
		this.errorMessage = errorMessage;
	}

	public List getData() {
		return data;
	}

	public void setData(List data) {
		this.data = data;
	}

	public Integer getTotal() {
		return total;
	}

	public void setTotal(Integer total) {
		this.total = total;
	}
	
	public static  JsonResult success() {
		return success(null);
	}
	
	public static  JsonResult success(List data) {
		JsonResult jsonResult = new JsonResult();
		jsonResult.success = true;
		jsonResult.error = null;
		jsonResult.errorMessage = null;
		jsonResult.data = data;
		return jsonResult;
	}
	
	public static  JsonResult success(T row) {
		JsonResult jsonResult = new JsonResult();
		jsonResult.success = true;
		jsonResult.error = null;
		jsonResult.errorMessage = null;
		jsonResult.data.add(row);
		jsonResult.total = 1;
		return jsonResult;
	}
	
	public static  JsonResult error(String error, String errorMessage) {
		JsonResult jsonResult = new JsonResult();
		jsonResult.success = false;
		jsonResult.error = error;
		jsonResult.errorMessage = errorMessage;
		jsonResult.data = null;
		return jsonResult;
	}
}

前端页面及JS

引入相关的CSS和JS

	
		
		
		
		
		
	
	
        

			
				
				新增
			
		
        
		

		    

		        

		            

		                ×
		                

		            
		            

		            	

							

								地址
								

									
										--省份--
			    					
			    					
			    						--城市--
			    					
			    					
			    						--县区--
			    					
			    					
			    						--街道--
			    					
								
							
							
							

								
								

									
								
							
						
		            
		        
		    
		
		
		
		
		
		
	

userInfo.js

$(document).ready(function(){
	// 地区下拉框初始化
	$("#province").selectpicker({width:130, liveSearch: true, liveSearchPlaceholder: "搜索" });
	$("#city").selectpicker({width:120, liveSearch: true, liveSearchPlaceholder: "搜索" });
	$("#region").selectpicker({width:120, liveSearch: true, liveSearchPlaceholder: "搜索" });
	$("#street").selectpicker({width:120});
	
	// 动态加载省份选项数据
	initSelectOptions("province", "PARENT");
});// onReady

/**
 * 动态生成select选项
 * @param selectId
 * @param parentId
 * @returns
 */
function initSelectOptions(selectId, parentId) {
	var selectObj = $("#" + selectId);
	$.ajax({
        url : "/flashsale/address/" + parentId,
        async : false,
        type : "GET",
        success : function(result) {
        	if (result.success) {
        		var configs = result.data;
        		selectObj.find("option:not(:first)").remove();
        		for (var i in configs) {
        			var addressConfig = configs[i];
        			var optionValue = addressConfig.optionValue;
        			var optionText = addressConfig.optionText;	
        			selectObj.append(new Option(optionText, optionValue));
        		}
        		
        		// 刷新select
    			selectObj.selectpicker('refresh');
        	} else {
        		toastr.error('获取['+ parentId + ']信息失败，原因：' + result.errorMessage);
        	}
        },
        error : function(result) {
        	toastr.error('获取['+ parentId + ']信息失败，原因：' + result.errorMessage);
        }
	});// ajax
}

/**
 * 根据选择的省份动态初始化城市options
 * @returns
 */
function initCity() {
	// 当省份变动时，初始化城市和清空县区和街道
	var provinceSel = $("#province").val();
	initSelectOptions("city", provinceSel);
	$("#region").find("option:not(:first)").remove();
	$("#region").selectpicker('refresh');
	$("#street").find("option:not(:first)").remove();
	$("#street").selectpicker('refresh');
}

/**
 * 根据选择的城市动态初始化区域options
 * @returns
 */
function initRegion() {
	// 选择城市
	var citySel = $("#city").val();
	initSelectOptions("region", citySel);
}

/**
 * 根据选择的县区动态初始化街道options
 * @returns
 */
function initStreet() {
	// 选择县区
	var regionSel = $("#region").val();
	initSelectOptions("street", regionSel);
}