• js进阶 9-11 select选项框如何动态添加和删除元素


    js进阶 9-11 select选项框如何动态添加和删除元素

    一、总结

    一句话总结:

    二、js进阶 9-11 select选项框如何动态添加和删除元素

    1、案例说明

    2、相关知识 Select 下拉列表

    Select 对象集合
    • options[]返回包含下拉列表中的所有选项的一个数组
    Select对象属性
    • length返回下拉列表中的选项数目
    • multiple 设置或返回是否选择多个项目。
    • selectedIndex 设置或返回下拉列表中被选项目的索引号。
    • size 设置或返回下拉列表中的可见行数。
    • id/name/disabled/form/tabIndex
    Select 对象方法
    • add() 向下拉列表添加一个选项。

      语法:selectobject.add(option,before)

    • remove() 从下拉列表中删除一个选项.

      语法: selectobject.remove(index)

    • blur()/focus()
    Option 对象的属性
    • defaultSelected 返回 selected属性的默认值。
    • index 返回下拉列表中某个选项的索引位置。
    • Selected 设置或返回 selected 属性的值。
    • text 设置或返回某个选项的纯文本值。
    • disabled/form/id/value......

    3、代码

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>演示文档</title>
     6 </head>
     7 <body>
     8     <form name="form1" action="">
     9         <select name="sel" size="3" onchange="addopt()">
    10             <option value="1">选项1</option>
    11             <option value="2">选项2</option>
    12             <option value="3">选项3</option>
    13         </select><br>
    14         <!-- <input type="button" value="测试按钮" onclick="addopt()"> -->
    15     </form>
    16 <script>
    17     function addopt(){
    18         var obj=document.form1.sel
    19         //添加一个选项
    20         //var op=new Option("文本","值")
    21         //obj.add(new Option("文本","值"))
    22         //删除所有选项option
    23         //obj.options.length=0;
    24         //删除当前选中选项
    25         var index=obj.selectedIndex; 
    26         obj.remove(index);
    27     }
    28 </script>
    29 </body>
    30 </html>
  • 相关阅读:
    bzoj1208 宠物收养所treap/splay/set
    Angular 下的 function
    argunlar 1.0.1 【数据绑定】
    argunlar 1.0.0 【hello,world】
    JavaScript编写风格指南 (三)
    JavaScript编写风格指南 (二)
    JavaScript编写风格指南 (一)
    AngularJS开发指南:表达式
    HTML5 移动开发(移动设备检测及对HTML5的支持)
    HTML5 移动开发(CSS3设计移动页面样式)
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9168596.html
Copyright © 2020-2023  润新知