• 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>
  • 相关阅读:
    朋友面试被问到---静态构造函数
    (设计模式之一)浅析简单工厂模式
    out与ref修饰符
    图解引用类型
    图解值类型
    PHP之路---1---Wamp环境配置--php环境配置
    js遮罩层弹出框
    总结
    PSP记录个人项目耗时情况
    代码复审
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9168596.html
Copyright © 2020-2023  润新知