Javascript中select下拉框常用操作方法


Javascript中select下拉框常用操作方法

许多刚接触Javascript的朋友不知道如何用Javascript来对select下拉框进行操作,下面这边文章主要讲了“Javascript中select下拉框常用操作方法”,希望对大家有帮助!

#
#
//1.动态创建select
   function createSelect(){
          var mySelect = document.createElement("select");
          mySelect.id = "mySelect"; 
          document.body.appendChild(mySelect);
      }
 
//2.添加选项option
   function addOption(){
          //根据id查找对象,
           var obj=document.getElementById('mySelect');
           //添加一个选项
         obj.options.add(new Option("text","value")); //这个兼容IE与firefox
     }
 
//3.删除所有选项option
  function removeAll(){
        var obj=document.getElementById('mySelect');
        obj.options.length=0;
     }
 
//4.删除一个选项option
    function removeOne(){
           var obj=document.getElementById('mySelect');
           //index,要删除选项的序号,这里取当前选中选项的序号
            var index=obj.selectedIndex;
            obj.options.remove(index);
     }
 
//5.获得选项option的值
        var obj=document.getElementById('mySelect');
        var index=obj.selectedIndex; //序号,取当前选中选项的序号
        var val = obj.options[index].value;
        alert(val);
 
//6.获得选项option的文本
        var obj=document.getElementById('mySelect');
        var index=obj.selectedIndex; //序号,取当前选中选项的序号
        var val = obj.options[index].text;
        alert(val);
 
//7.修改选项option
        var obj=document.getElementById('mySelect');
        var index=obj.selectedIndex; //序号,取当前选中选项的序号
        var val = obj.options[index]=new Option("新文本","新值");
 
//8.删除select
      function removeSelect(){
            var mySelect = document.getElementById("mySelect");
            mySelect.parentNode.removeChild(mySelect);
    }
#
#

看了上面这么多,只要将上面代码直接考到你们的页面运行即可。

上一篇 下一篇