前面寫了兩篇關於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表示北京市所有的區。

    這裡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);
	}

}

實現效果