select框多级联动（以省市区三级联动为例）公共方法

前面写了两篇关于select框的文章，想到select框多级联动的情况。多级联动的select框从数据库中获取选项，也是很好实现的，我看到其他文章都写得过于复杂，所以这里写了一个公共方法，配合jQuery一起使用，供大家参考。

$.fn.linkselect = function(options) {
	var select = this;//获取当前select对象
	var url = options.url;//获取数据的链接
	var value = options.value;//初始化需要选中的数据
	var now = options.now;//当前select的级别
	var param = options.param;//传向后台的参数
	var level = options.level;//一共有多少级select
	var preid = options.preid;//当前select的id的前缀
	$.get(url[now],{param:param},function(result){
		select.find("option").remove();
		select.append("<option value=''>请选择</option>");
		for(key in result){
			if(key == value[now]){
				select.append("<option value='"+key+"' selected>"+result[key]+"</option>");
			}else{
				select.append("<option value='"+key+"'>"+result[key]+"</option>");
			}
		}
		//onchange事件，改变后面select的值
		select.change(function(){
			var thisId = select.attr("id").split("_")
			var param = select.val();
			var nextId = parseInt(thisId[1])+1;
			if(nextId <= level){
				var next = $("#"+preid+"_"+nextId);
				next.find("option").remove();
				$("#"+preid+"_"+nextId).linkselect({
					url:url,
					value:value,
					level:level,
					now:nextId,
					param:param,
					preid:preid
				});
				next.change();
			}
		});
		//设置后面select的值
		select.change();
	});
};

方法很简单，从第一级select到最后一级依次初始化数据，并给每个select添加change事件，触发change事件时会改变低级别select的值，使用递归减少重复代码。

那么如何使用呢，我们一起来看一下。

<div class="form-group col-md-3">
		<label class="control-label" style="float:left"><h4> 省份：</h4> </label>

		<div class="col-xs-8">
			<select class="form-control" id="select_1" name="dbId" class="form-control">
			</select>
		</div>
	</div>
	<div class="form-group col-md-3">
		<label class="control-label" style="float:left"><h4> 地级市：</h4> </label>

		<div class="col-xs-8">
			<select class="form-control" id="select_2"  name="dbId" class="form-control">
			</select>
		</div>
	</div>
	<div class="form-group col-md-3">
		<label class="control-label" style="float:left"><h4> 县：</h4> </label>

		<div class="col-xs-8">
			<select class="form-control" id="select_3"  name="dbId" class="form-control">
			</select>
		</div>
	</div>

定义了3个select框，id分别select_1,select_2,select_3,如果你有更多联动也可以继续添加select_4,select_5...多少级都可以，就是这么强大。但是这一组select的id前缀都要相同，id规则为前缀加下划线_再加级别。

$("#select_1").linkselect({
	url:{"1":"${ctx}/dis/getDisJson","2":"${ctx}/dis/getDisJson","3":"${ctx}/dis/getDisJson"},//每一级从后端获取数据的地址
	value:{"1":"1"},//每一级select的默认value,此时表示第一级选中北京
	level:3,//表示一共拥有几级联动，三级联动就写3，四级就写4，一次类推
	now:1,//固定值，表示当前为第几级
	param:0,//参数值，传向后端的参数，0表示获取所有的省份
        preid:"select"//所有select的id前缀都应该是一样的，后面加上_和级别数

});

这里3个select框都是从一个数据接口获取数据，只是参数不同，所以URL里的地址写的一样，设计成k-v结构每一级对应一个URL就是怕大家需要从不同的地址获取数据。

这里以省市区三级联动为例，当然你也可以做其他的多级联动。

给大家看一下这里的数据库结构，parent_id 为0时表示所有的省份和直辖市，parent_id为1表示北京市所有的区。

(需要全国省市区数据的可以到github上下载：https://github.com/daiwenlong/reports/blob/master/district_info.sql）

这里param为0表示第一级select获取所有的省份和直辖市，如果第一级select的值不为空，那么会将第一级的值传入后台获取该省份地级市信息放入第二级select，依次往下走。

后端代码也贴一部分出来

package com.dwl.rep.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;
import com.dwl.rep.pojo.DistrictInfo;
import com.dwl.rep.service.DistrictService;

/**
 * 控制器
 * @author dwl
 *
 */
@Controller
@RequestMapping("/dis")
public class DisController {
	
	@Resource
	private DistrictService districtService;
	
	/**
	 * 根据父级id获取地区列表
	 * @param param
	 * @return
	 */
	@RequestMapping(value="/getDisJson",produces = "application/json; charset=utf-8")
	@ResponseBody
	public String getDataByParentId(String param){
		List<DistrictInfo> list = districtService.getDistrictByParenetId(param);
		Map<String, String> map = new HashMap<>();
		list.forEach(item->{
			map.put(item.getId()+"", item.getName());
		});
		return JSON.toJSONString(map);
	}

}

实现效果

select框多级联动（以省市区三级联动为例）公共方法

猜你喜欢