JavaScript中动态创建和操作select元素

原文链接：http://blog.csdn.net/a313976010/article/details/6728646

1.动态创建select

[javascript] view plain copy

1. function createSelect(){  
2.           var mySelect = document.createElement("select");  
3.           mySelect.id = "mySelect";   
4.           document.body.appendChild(mySelect);  
5.       }  

2.添加选项option

[javascript] view plain copy

1. function addOption(){  
2.   
3.          //根据id查找对象，  
4.           var obj=document.getElementById('mySelect');  
5.   
6.           //添加一个选项  
7.           obj.add(new Option("文本","值"));    //这个只能在IE中有效  
8.           obj.options.add(new Option("text","value")); //这个兼容IE与firefox  
9.     }  

3.删除所有选项option   

[javascript] view plain copy

1. function removeAll(){  
2.          var obj=document.getElementById('mySelect');  
3.          obj.options.length=0;  
4.   
5.    }  

4.删除一个选项option

[javascript] view plain copy

1. function removeOne(){  
2.            var obj=document.getElementById('mySelect');  
3.   
4.            //index,要删除选项的序号，这里取当前选中选项的序号  
5.            var index=obj.selectedIndex;  
6.            obj.options.remove(index);  
7.      }  

5.获得选项option的值

[javascript] view plain copy

1. var obj=document.getElementById('mySelect');  
2.   
3. var index=obj.selectedIndex; //序号，取当前选中选项的序号  
4.   
5. var val = obj.options[index].value;  

6.获得选项option的文本

[javascript] view plain copy

1. var obj=document.getElementById('mySelect');  
2.   
3. var index=obj.selectedIndex; //序号，取当前选中选项的序号  
4.   
5. var val = obj.options[index].text;  

 

7.修改选项option

[javascript] view plain copy

1. var obj=document.getElementById('mySelect');  
2.   
3. var index=obj.selectedIndex; //序号，取当前选中选项的序号  
4.   
5. var val = obj.options[index]=new Option("新文本","新值");  

8.删除select     

[javascript] view plain copy

1. function removeSelect(){  
2.             var mySelect = document.getElementById("mySelect");  
3. mySelect.parentNode.removeChild(mySelect);  
4.      }  

 

另外附创建option的另外一种方法：

[javascript] view plain copy

1. var text = "test";     
2.         var mySelect = document.getElementById("mySelect");  
3.           
4.         //创建标签  
5.         var opt = document.createElement("option");  
6.           
7.         //创建文本  
8.         var _text = document.createTextNode(text);  
9.           
10.         //把文本赋给标签  
11.         opt.appendChild(_text);  
12.           
13.         //属性赋值  
14.         opt.setAttribute("value","lala");  
15.           
16.         //添加  
17.         mySelect.appendChild(opt);