当前位置:Web前端 > javascript> 正文

JS动态操作select的option

时间:2013-7-9类别:Web前端

JS动态操作select的option

JS动态操作select的option

Javascript 操作select是表单中常见的一种,下面介绍几种常用的JS动态操作select中的各种方法:

  •  
  •  
  • JScript 代码   复制
  • 
       //动态创建select
     function createSelect()
     {
     var mySelect = document.createElement("select");
     mySelect.id = "mySelect";
     document.body.appendChild(mySelect);
     } 
    			

     

  •  
  •  
  • JScript 代码   复制
  • 
    			

     

  • //添加选项option
  • function addOption()
  • {
  • //根据id查找对象,
  • var obj=document.getElementById('mySelect');
  • //添加一个选项
  • obj.add(new Option("文本","")); //这个只能在IE中有效
  • obj.options.add(new Option("text","value")); //这个兼容IE与firefox
  • }
  •  
  •  
  •  
  • JScript 代码   复制
  • 
      //删除所有选项option
     
    			

    function removeAll()

    {

    var obj=document.getElementById('mySelect');

    obj.options.length=0;

    }

     

  •  
  •  
  • JScript 代码   复制
  • 
    			

     

  •     //删除一个选项option
  • function removeOne()
  • {
  • var obj=document.getElementById('mySelect');
  • //index,要删除选项的序号,这里取当前选中选项的序号
  • var index=obj.selectedIndex;
  • obj.options.remove(index);
  • }
  •  
  •  
  •  
  • JScript 代码   复制
  • 
    			

     

  •     //获得选项option的文本
  • var obj=document.getElementById('mySelect');
  • var index=obj.selectedIndex; //序号,取当前选中选项的序号
  • var val = obj.options[index].text;
  •  
  •  
  •  
  • JScript 代码   复制
  • 
    			

     

  •     //修改选项option
  • var obj=document.getElementById('mySelect');
  • var index=obj.selectedIndex; //序号,取当前选中选项的序号
  • var val = obj.options[index]=new Option("新文本","新值");
  •  
  •  

    上一篇下一篇

    猜您喜欢

    热门推荐