zoukankan      html  css  js  c++  java
  • JS操作select下拉框动态变动(创建/删除/获取)

    动态创建及删除select、添加及删除选项option、获得选项option的值、获得选项option的文本等等,感兴趣的朋友可以参考下

    1.动态创建select 

     
    function createSelect(){ 
    var mySelect = document.createElement_x("select"); 
    mySelect.id = "mySelect"; 
    document.body.appendChild(mySelect); 
    } 
    

    2.添加选项option 

     
    function addOption(){ 
    //根据id查找对象, 
    var obj=document.getElementByIdx_x('mySelect'); 
    //添加一个选项 
    obj.add(new Option("文本","值")); 
    } 
    

    3.删除所有选项option 

     
    function removeAll(){ 
    var obj=document.getElementByIdx_x('mySelect'); 
    obj.options.length=0; 
    } 
    

    4.删除一个选项option 

     
    function removeOne(){ 
    var obj=document.getElementByIdx_x('mySelect'); 
    //index,要删除选项的序号,这里取当前选中选项的序号 
    var index=obj.selectedIndex; 
    obj.options.remove(index); 
    } 
    

    5.获得选项option的值 

     
    var obj=document.getElementByIdx_x('mySelect'); 
    var index=obj.selectedIndex; //序号,取当前选中选项的序号 
    var val = obj.options[index].value; 
    

    6.获得选项option的文本 

     
    var obj=document.getElementByIdx_x('mySelect'); 
    var index=obj.selectedIndex; //序号,取当前选中选项的序号 
    var val = obj.options[index].text; 
    

    7.修改选项option 

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

    8.删除select 

     
    function removeSelect(){ 
    var mySelect = document.getElementByIdx_x("mySelect"); 
    mySelect.parentNode.removeChild(mySelect); 
    } 
    

    转载原文:http://www.jb51.net/article/37698.htm

  • 相关阅读:
    Oracle第五周测验
    软件测试第五周
    Oracle第四周作业
    c++第二章测试
    软件测试第四章
    软件测试 第三章
    Centos 安装.NET Core环境
    .net core 集成极光推送
    Swagger添加文件上传测试
    linux firewall
  • 原文地址:https://www.cnblogs.com/gxbk629/p/4040719.html
Copyright © 2011-2022 走看看