js动态的给select添加或者删除option选项
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.length
for(var i = count-1;i>0;count--){
//这里可以获取option的值来判断要不要删除option
var text=obj.options[i].val();
if(“”==text){
obj.options.remove(i);//每次删除下标都是i
}
}
//1.3删除所有option
function removeAll(){
//根据id查找对象,
var selectObj=document.getElementById('mySelect');
//将select的options置为0
selectObj.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修改option
var selectObj=document.getElementById('mySelect');
var index=selectObj.selectedIndex; //序号,取当前选中选项的序号
var val = selectObj.options[index]=new Option("新文本","新值");