需求:选择省-市-站场,选择省后才可选择市,选择市后才可选择站点,选择默认值为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); $.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']"); });通过以上即可完美的实现可输入可模糊匹配下拉选择的级联选择,总结文档第一!