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、代码

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>演示文档</title>
 </head>
 <body>
     <form name="form1" action="">
         <select name="sel" size="3" onchange="addopt()">
             <option value="1">选项1</option>
             <option value="2">选项2</option>
             <option value="3">选项3</option>
         </select><br>
         <!-- <input type="button" value="测试按钮" onclick="addopt()"> -->
     </form>
 <script>
     function addopt(){
         var obj=document.form1.sel
         //添加一个选项
         //var op=new Option("文本","值")
         //obj.add(new Option("文本","值"))
         //删除所有选项option
         //obj.options.length=0;
         //删除当前选中选项
         var index=obj.selectedIndex;
         obj.remove(index);
     }
 </script>
 </body>
 </html>

js进阶 9-11 select选项框如何动态添加和删除元素的更多相关文章

  1. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  2. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  3. js动态添加和删除标签

    html代码 <h1>动态添加和删除标签</h1> <div id="addTagTest"> <table> <thead& ...

  4. JS实现动态添加和删除div

    实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...

  5. js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  6. 使用js对select动态添加和删除OPTION示例代码

    动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助   <s ...

  7. 使用js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  8. JS应用实例5:全选、动态添加

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  9. select选项框特效

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. Flex 布局教程:实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  2. PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等

    页面导航: 首页 → 网络编程 → PHP编程 → php技巧 → 正文内容 PHP安全 PHP开发中常见的安全问题详解和解决方法(如Sql注入.CSRF.Xss.CC等) 作者: 字体:[增加 减小 ...

  3. leetcode第一题--two sum

    Problem:Given an array of integers, find two numbers such that they add up to a specific target numb ...

  4. WCF Restful Service的服务

    构建基于WCF Restful Service的服务 前言 传统的Asmx服务,由于遵循SOAP协议,所以返回内容以xml方式组织.并且客户端需要添加服务端引用才能使用(虽然看到网络上已经提供了这方面 ...

  5. MITMF

    一. 安装 项目地址:https://github.com/byt3bl33d3r/MITMf 需要自行手动安装python-nfqueue,pefile模块 sudo apt-get install ...

  6. 汽车VIN码识别适用于什么行业

    在您看完之前的文章知道了VIN码识别的原理,现在跟大家分享一下汽车VIN码识别的应用场景吧 汽车VIN码不仅在制造.销售.保养.保险.交易环节会需要录入汽车的VIN码,在交通事故处理中,作为汽车身份唯 ...

  7. 替代PhotoShop:GIMP图形编辑器的使用

    GIMP最早是linux环境下用于图形编辑的一款开源软件,目前的功能很已经很丰富,如果使用得当,在很多的图形编辑操作上完全可以替代收费的Photoshop(PS).目前GIMP已经发展成了多平台的开源 ...

  8. linux-more

    more 这个命令可以用来分页查看大篇幅的文件内容非常有效 命令参数: -num  : 这里的num 是一个数字,用来指定分页显示时每页的行数 +num  : 指定从文件的第几行num开始显示 ... ...

  9. TypeScript入门知识五(面向对象特性一)

    1.类(class) 类是TypeScript的核心,使用TypeScript开发时,大部分代码都是写在类里面的. 类的定义 ,属性控制符 public(允许外部访问,也是默认的方式),private ...

  10. 代码: CSS3动画,简单示例(鼠标移上去后,背景图片旋转)

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.mi ...