select2可输入可模糊匹配选择实现省市站级联选择(数据载入后默认为空值)

需求：选择省-市-站场，选择省后才可选择市，选择市后才可选择站点，选择默认值为value=""

网上百度一大堆走了好几次弯路后乖乖回归文档解决了

文档地址：https://select2.org/

引入插件文档：

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

HTML:(示例需要)

<div class="col-sm-6 col-md-4">
								<div class="form-group form-inline">
									<label class="control-label">起（讫）省</label>
									<select class="form-control" name="startprov" data-key="Sheng">
										<option value=""></option>
									</select>
								</div>
							</div>
							<div class="col-sm-6 col-md-4">
								<div class="form-group form-inline">
									<label class="control-label">起（讫）市县</label>
									<select class="form-control" name="startcity" disabled data-key="Shi">
										<option value=""></option>
									</select>
								</div>
							</div>
							<div class="col-sm-6 col-md-4">
								<div class="form-group form-inline">
									<label class="control-label">起（讫）站点</label>
									<select class="form-control" name="startstation" disabled data-key="ZhanDian">
										<option value=""></option>
									</select>
								</div>
							</div>

JAVASCRIP

请求接口数据，数据返回格式如下（示例，id渲染后即为$(selector).val()的值，且id必须唯一，不可重复）

[
    {
        "id": "湖北省",
        "text": "湖北省"
    },
    {
        "id": "河南省",
        "text": "河南省"
    },
    {
        "id": "安徽省",
        "text": "安徽省"
    },
    {
        "id": "海南省",
        "text": "海南省"
    }
]

如果后台数据请求返回如上数据，则不需要经过如下处理，如果后台返回字段名称不是“id"跟“text”,则需如下处理，即可初始化得到省级数据

	function commonSelect({接口请求所需参数},selector){
//此处经过ajax请求处理后得到后台返回数据res=[{DESTNAME:'湖北省'},{DESTNAME:'广东省'...}];
var Arr = [];
 var sel = $(selector);	  sel.html("<option></option>");//此处不可无，将select下拉数据清空为原来的默认空值，否则数据会append上去   

$.each(res,function(i,item){
		    Arr.push({id:item.DESTNAME,text:item.DESTNAME})
		});
		sel.select2({data:Arr,placeholder:'',disabled:false});//默认不可选

文档中提示：为了让placeholder出现，你必须给一个空的<option></option>在select选择器中，这是因为浏览器默认选中第一个option为默认值，如果你对第一个option非空，浏览器将使用第一个值代替placeholder

因此，请注意在HTML代码中，每个select都加入了<option></option>,否则像载入省数据后总显示如下而非我们想要的

JAVASCRIPT中初始化select:需加入placeholder，否则虽然默认空值，但是渲染样式会出错

sel.select2({data:Arr,placeholder:'',disabled:false});//默认不可选

最后，实行级联给每个select添加onchange事件即可，下面以实现省市级联onchange事件示例

$("[name='startprov']").on("change", function () {
		//市级未显示，站场不可出现
		$("[name='startstation']").attr("disabled", true);
		commonSelector({此处为接口调用所需传入参数对象}, "[name='startcity']");
	});

通过以上即可完美的实现可输入可模糊匹配下拉选择的级联选择，总结文档第一！

附加：近期发现这个级联选择省更换一次，市级跟省站重新生成的数据是append上去，请在commonSelect公共函数中加载如今前将select初始化为<select><option></option></select>，代码已在上面更改~

若初始值不为空值，可以如下赋值，如给<input id="search-car" type="text"/>

$('#search-car').html('<option value="' +car + '">' +car + '</option>').trigger("change");