微信扫一扫打赏支持

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>
复制代码

 

posted @   范仁义  阅读(994)  评论(0)  编辑  收藏  举报
编辑推荐：
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
历史上的今天：
2017-06-11 递推2--过河卒（Noip2002）
2017-06-11 递推1--兔子问题
侧边栏
打赏
点击右上角即可分享
微信分享提示