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. linux进阶之远程免密登录，动态添加磁盘及个别基础命令

    一. 免密登录(远程连接ssh) ssh IP   #连接登录到其它机 ssh 192.168.10.102 ssh IP "CMD"   #在其它机器上执行命令 yum -y i ...

随机推荐

  1. UVa 11015 - 05-2 Rendezvous

    題目:有一個班級的學生要一起寫作業,所以他們要到一個統一的地點.現在給你他們各自的位置, 問集合地點定在哪,能够讓全部人走的總路徑長度最小. 分析:圖論.最短路.直接利用Floyd計算最短路,找到和值 ...

  2. 在手机中预置联系人/Service Number

    代码分为两部分: Part One 将预置的联系人插入到数据库中: Part Two 保证预置联系人仅仅读,无法被编辑删除(在三个地方屏蔽对预置联系人进行编辑处理:联系人详情界面.联系人多选界面.新建 ...

  3. Hibernate之API初识及增删改查实现

    声明:关于hibernate的学习.非常大一部分东西都是概念性的. 大家最好手里都有一份学习资料,在我的博文中.我不会把书本上的概念一类的东西搬过来.那没有不论什么意义.关于hibernate的学习, ...

  4. 每日技术总结：encodeURI,encodeURIComponent,toFixed

    1. encodeURI(URIstring) encodeURI()函数可把字符串作为URI进行编码 encodeURI("http://www.w3school.com.cn" ...

  5. VUE笔记 - 品牌后台 - v-for Splice Some Filter findIndex indexOf 直接return函数结果

    <body> <div id="app"> <div class="panel panel-primary"> <di ...

  6. Java web开发了解

    1.什么是Java web项目? F.A.Q: 服务器 服务器,也称伺服器,是提供计算服务的设备.由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力.服务器的构 ...

  7. 洛谷—— P1118 [USACO06FEB]数字三角形Backward Digit Su…

    https://www.luogu.org/problem/show?pid=1118#sub 题目描述 FJ and his cows enjoy playing a mental game. Th ...

  8. Android应用开发-小巫CSDN博客client之获取评论列表

    Android应用开发-小巫CSDN博客客户端之获取评论列表 上一篇博客介绍了博文具体内容的业务逻辑实现,本篇博客介绍小巫CSDN博客客户端的最后一项功能.获取评论列表,这个功能的实现跟前面获取文章列 ...

  9. 微信支付v2开发(2) 微信支付账号体系

    本文介绍微信支付账号体系各参数. 商户在微信公众平台提交申请资料以及银行账户资料,资料审核通过并签约后,可以获得表6-4所示帐户(包含财付通的相关支付资金账户),用于公众帐号支付. 帐号 作用 app ...

  10. HDU 2587 - 很O_O的汉诺塔

    看题传送门 吐槽题目 叫什么很O_O的汉诺塔我还@.@呢. 本来是想过一段时间在来写题解的,不过有人找我要. 本来排名是第8的.然后搞了半天,弄到了第五.不过代码最短~ 截止目前就9个ID过,小小的成 ...