1.首先select的有id
eg : id=“engCategoryId”
<g2:select name="_M.engType" list="%{engTypeEnum}"id="engTypeId" listKey="name()" listValue="desc" headerKey="" headerValue="请选择" label="工程类型" onchange="categoryChange()" requiredLabel="true" labelSeparator=":"/><g2:select name="_M.engCategory" list="%{engCategoryEnum}" id="engCategoryId" listKey="name()" listValue="desc" headerKey="" headerValue="请选择" label="工程类别" onchange="categoryChange()" requiredLabel="true" labelSeparator=":"/>
2.需求判断,根据工程类型来来判断工程类型的选择;
当工程类型选择 园林绿化,那么工程类型为 监理,施工,设计 三个选项
其他类型为建立和施工两个选项;
所以这里要用到删除其中一个option 和添加一个option,因为我这里的option的位置是固定的所以直接通过index来删除,再通过判断select的option的个数来进行判断是否要添加《设计》 这个下拉选项, 通过select中的change函数οnchange=“categoryChange()”;还有我这初始化的时候会将工程类型的下拉选项都加载过来;在初始化的时候就要删除,如果工程类型不是园林绿化的话;
所以我的代码如下实现,在刷新页面全局函数中
//全局函数$(function() {categoryChange();}//更据工程类型来确定工程类别的选项function categoryChange(){var engType = $("#engTypeId").val();//园林的有设计其他的没有if("YLLH" !=engType){document.getElementById("engCategoryId").options.remove(3); }else{//工程类别下拉选项var engCategory = document.getElementById("engCategoryId");//判断是否已经有了设计的下拉选项if(engCategory.options.length==3){engCategory.options.add(new Option("设计","SJ")); }}}
总结:
1.删除select的option的js方法
//1.1根据下标来删除document.getElementById("engCategoryId").options.remove(3);//1.2通过遍历select的option来删除var obj =document.getElementById("engCategoryId")var count =engCategory.options.lengthfor(var i = count-1;i>0;count--){//这里可以获取option的值来判断要不要删除optionvar text=obj.options[i].val();if(“”==text){obj.options.remove(i);//每次删除下标都是i}}//1.3删除所有optionfunction removeAll(){//根据id查找对象,var selectObj=document.getElementById('mySelect');//将select的options置为0selectObj.options.length=0;}
2.添加或者修改option
//2.1添加option//根据id查找对象,var selectObj=document.getElementById('mySelect');//添加一个选项selectObj.add(new Option("文本","值")); //这个只能在IE中有效selectObj.options.add(new Option("text","value")); //这个兼容IE与firefox,谷歌//2.2修改optionvar selectObj=document.getElementById('mySelect');var index=selectObj.selectedIndex; //序号,取当前选中选项的序号var val = selectObj.options[index]=new Option("新文本","新值");