当下拉框选项不多,而且可以写死的情况下,用js在页面写可能更方便。
我的html代码如下,两个关联是下拉框:配件类型、子类型。
<div class="col-md-3 col-sm-3 col-xs-3"> <t:formgroup> <t:label path="partsType"></t:label> <t:select2 path="partsType" onchange="subPartsSelect();"></t:select2> </t:formgroup> </div> <div class="col-md-3 col-sm-3 col-xs-3"> <t:formgroup> <t:label path="subPartsType"></t:label> <t:select2 path="subPartsType"></t:select2> </t:formgroup> </div>
js中,页面初始化的时候要对下拉框进行初始化,调用函数initSubParts()。
当配件类型下拉框改变时,子类型要进行重新赋值,调用函数subPartsSelect()。
$(function() { initSubParts(); } function initSubParts(){ subPartsSelect(); var iniSubPartsType ='${parts.subPartsType}'; $("#subPartsType").val(iniSubPartsType).trigger("change"); } function subPartsSelect(){ var partsData=[]; $("#subPartsType").empty(); if($("#partsType").val()=="wash"){ partsData.push({id:"film", text:"贴膜"}) }; if($("#partsType").val()=="repair"){ partsData.push({id:"face", text:"外观件"}); partsData.push({id:"inside", text:"内饰"}); partsData.push({id:"engine", text:"发动机配件"}); partsData.push({id:"chassis", text:"底盘"}); partsData.push({id:"assist", text:"辅料"}); partsData.push({id:"battery", text:"电池"}) }; if($("#partsType").val()=="spary"){ }; $("#subPartsType").select2({placeholder:"请选择子项",allowClear: true ,data : partsData}); }