页面中dropDownListt的二级关联

时间:2023-03-09 17:47:56
页面中dropDownListt的二级关联

  当下拉框选项不多,而且可以写死的情况下,用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});
}