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.需求判断,根据工程类型来来判断工程类型的选择;
当工程类型选择 园林绿化,那么工程类型为 监理,施工,设计 三个选项
其他类型为建立和施工两个选项;
js动态的给select添加或者删除option选项_第1张图片
所以这里要用到删除其中一个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("新文本","新值");

你可能感兴趣的:(js,js)