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

本文主要是介绍JavaScript中动态创建和操作select元素，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

1.动态创建select

[javascript]  view plain copy  
 function createSelect(){  
           var mySelect = document.createElement("select");  
           mySelect.id = "mySelect";   
           document.body.appendChild(mySelect);  
       }  

2.添加选项option

[javascript]  view plain copy  
 function addOption(){  
   
          //根据id查找对象，  
           var obj=document.getElementById('mySelect');  
   
           //添加一个选项  
           obj.add(new Option("文本","值"));    //这个只能在IE中有效  
           obj.options.add(new Option("text","value")); //这个兼容IE与firefox  
     }  

3.删除所有选项option

[javascript]  view plain copy  
 function removeAll(){  
          var obj=document.getElementById('mySelect');  
          obj.options.length=0;  
   
    }  

4.删除一个选项option

[javascript]  view plain copy  
 function removeOne(){  
            var obj=document.getElementById('mySelect');  
   
            //index,要删除选项的序号，这里取当前选中选项的序号  
            var index=obj.selectedIndex;  
            obj.options.remove(index);  
      }  

5.获得选项option的值

[javascript]  view plain copy  
 var obj=document.getElementById('mySelect');  
   
 var index=obj.selectedIndex; //序号，取当前选中选项的序号  
   
 var val = obj.options[index].value;  

6.获得选项option的文本

[javascript]  view plain copy  
 var obj=document.getElementById('mySelect');  
   
 var index=obj.selectedIndex; //序号，取当前选中选项的序号  
   
 var val = obj.options[index].text;  

7.修改选项option

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

8.删除select

[javascript]  view plain copy  
 function removeSelect(){  
             var mySelect = document.getElementById("mySelect");  
 mySelect.parentNode.removeChild(mySelect);  
      }  

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

[javascript]  view plain copy  
 var text = "test";     
         var mySelect = document.getElementById("mySelect");  
           
         //创建标签  
         var opt = document.createElement("option");  
           
         //创建文本  
         var _text = document.createTextNode(text);  
           
         //把文本赋给标签  
         opt.appendChild(_text);  
           
         //属性赋值  
         opt.setAttribute("value","lala");  
           
         //添加  
         mySelect.appendChild(opt);  