1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > js动态的给select添加或者删除option选项

js动态的给select添加或者删除option选项

时间:2021-10-01 22:01:00

相关推荐

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.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("新文本","新值");

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。