javascript动态添加删除select中的options元素的又一解决办法

最新推荐文章于 2019-01-28 18:19:41 发布
原创 最新推荐文章于 2019-01-28 18:19:41 发布 · 1.7k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #input #button #function #table #border

本文提供了一个使用JavaScript操作DOM元素的具体示例，包括清除下拉菜单选项和批量创建选项的功能。通过`getElementById`获取元素，利用`removeChild`和`appendChild`等方法实现动态更新。
    function clean(){
        var ss=document.getElementById("s")
        while(ss.childNodes.length>0){
                ss.removeChild(ss.childNodes[0]);
            }
    }
    function bd(){
        var ss=document.getElementById("s")
        for(var i=0;i<100;i++){
            op=document.createElement("option");
            tx=document.createTextNode(i);
            op.setAttribute("value","h"+i);
            op.appendChild(tx);
            ss.appendChild(op);
        }
    }
<body>
<input type="submit" name="Submit" value="提交"  onclick="getInfo()"/>
<table   id="show" width="800" style=" border-style:groove; border-style:dotted;" border="1">
</table>

<form id="form1" name="form1" method="post" action="">
  <p>
    <select name="s" id="s" onchange="alert(this.options[this.options.selectedIndex].value)">
      <option value="1">1</option>
      <option value="1">1</option>
      <option value="21">1</option>
      <option value="1">1</option>
      <option value="qw">q</option>
      <option value="qw">qw</option>
      <option value="qw">qw</option>
    </select>
  </p>
  <p>
    <input type="button" name="Submit" value="clear"  onclick="clean()"/>
    <input type="button" name="Submit" value="build" onclick="bd()" />
  </p>
</form>
</body>
</html>
 自己做的测试联系
javascript Select标记中options操作方法集合
10-30
在JavaScript中，`select`元素的`options`属性是一个选项集合，用于操作下拉列表中的所有选项。这个集合提供了一系列的方法来添加、删除、访问和修改`option`元素。以下是一些关键的操作方法： 1. **`options.add...
JS动态添加与删除select中的Option对象(示例代码)
10-26
要向`select`元素动态添加新的`option`，你可以使用`add()`方法（在某些浏览器中可能不兼容）或者通过直接操作`options`数组来实现。以下是一个使用`options`数组的方法： ```javascript function addOneOption() {...
javascript操作Select中的 options集合
slqgenius的博客
08-10 1797
object.options.add(new Option(label,value))方法向集合里添加一项option对象；           object.options.remove(index) 方法移除options集合中的指定项；          object.options(index)或options.item(index)可以通过索引获取options集合的指定项；  
js select option对象小结
晨港飞燕的专栏
08-31 6335
 先讲jquery方式,再讲原生方式   jquery方式   选择框 jQuery获取Select选择的Text和Value: 语法解释： 1. $("#select_id").change(function(){//code...});   //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("optio...
JS动态添加option和删除option
热门推荐
半块菠萝的博客
02-28 1万+
ｊｓ自动创建和删除ｏｐｔｉｏｎ 本文转载自http://www.jb51.net/article/35205.htm 仅供学习之用，留着随时查看动态创建
js中创建html标签、添加select下默认的option的value和text、删除select元素节点下所有的OPTION节点
smithdoudou88的专栏
10-17 4396
select 标签
select中添加、修改、删除option元素
weixin_30254435的博客
11-10 161
<!doctypehtmlpublic"-//w3c//dtdhtml4.0transitional//en"> <html> <head> <title>javascriptselectoptionstextvalue</title> <metaname="keywords"content...
JavaScript中动态创建和操作select元素
messenger的博客
10-22 3498
原文链接：http://blog.youkuaiyun.com/a313976010/article/details/6728646 1.动态创建select [javascript] view plain copy function createSelect(){             var mySelect = docum
Bootstrap js动态给select添加option元素不显示
NoahCode的博客
01-28 3296
问题起因 本人在使用Bootstrap过程中，用js动态给select元素添加option元素时没有显示，在for循环获取option数据时，是能获取的，但是就是显示不出来，只有当人为的去刷新此页面后才可以显示，这对用户来说很不友好，故从网上查找解决办法。 解决方法 在获取完option数据后添加以下两句，即可在进行数据的更改后可以更新select选项 //要以编程方式更新JavaScript的选...
layui select动态添加option的实例
08-27
layui是一款轻量级的前端框架，提供了许多实用的组件和功能，select组件是其中的一种，能够实现动态添加option的功能。 首先，我们来看一下html代码： ```html <form class="layui-form" action=""> ...
javascript 删除select中的所有option的实例
10-19
本文将详细介绍如何使用JavaScript删除select元素中的所有option标签，并给出几种不同的实现方法。在Web开发过程中，经常需要动态地对select元素进行操作，例如清除已有选项，以适应不同的应用场景。正确地删除...
使用js对select动态添加和删除OPTION示例代码
10-27
在这个场景中，我们关注的是如何使用JavaScript来动态地添加和删除`<select>`元素中的`<option>`选项。`<select>`元素通常用于创建下拉列表，而`<option>`则代表下拉列表中的可选项。 首先，让我们深入理解提供的...
为 SELECT 对象增加或删除选项的方法在各浏览器中的支持情况不同
java学习
09-04 2004
标准参考 DOM 2 HTML 中分别定义了 HTMLSelectElement、HTMLOptionsCollection 和 HTMLOptionElement 接口，它们分别定义了若干属性和方法来获知或操作 SELECT 及 OPTION 元素。 HTMLSelectElement 接口定义了以下属性及方法： length: 获取 SELECT 元素中 OPTION 的数量； op
用js得到select被选中的值
bluesft的专栏
10-08 3434
 function show(obj){  alert(obj); }      1    2    3    4   
XMLHttpRequest 中的属性和方法
bluesft的专栏
06-14 1126
方法：  void open(string method, string url, boolean asynch, string username, string password)：这个方法会建立对服务器的调用。这是初始化一个请求的纯脚本方法。它有两个必要的参数，还有3个可选参数。要提供调用的特定方法（GET、POST或PUT），还要提供所调用资源的URL。另外还可以传递一个Boolean值，指
ajax基础（一）：创建适合不同浏览器的XMLHttpRequest
bluesft的专栏
06-14 1017
 由于不同的浏览器创建xmlhttprequest 的方法不同所以应该用一些方法来创建一个兼容大多数浏览器的xmlhttpRequest对象，代码var xmlHttp; function createXMLHttpRequest() ...{    if (window.ActiveXObject) ...{        xmlHttp = new ActiveXObject(
用于处理XML文档的DOM元素属性
bluesft的专栏
06-14 884
用于处理XML文档的DOM元素属性 属性名 描述 childNodes
如何在 JavaScript 中动态添加和删除 `<select>` 元素的选项？
最新发布
07-08
在 JavaScript 中，可以通过操作 DOM 来动态添加或删除 `<select>` 元素的选项。以下是具体的方法实现。 ### 动态添加选项 要动态添加一个选项到 `<select>` 元素中，可以使用 `document.createElement` 方法创建一个新的 `<option>` 元素，并将其添加到 `<select>` 元素中。 ```javascript // 创建新的 option 元素 var newOption = document.createElement("option"); newOption.value = "value1"; newOption.text = "Option 1"; // 获取 select 元素并添加新选项 var selectElement = document.getElementById("mySelect"); selectElement.appendChild(newOption); ``` ### 动态删除选项 要动态删除 `<select>` 元素中的某个选项，可以通过 `removeChild` 方法或者直接通过索引设置为 `null` 来实现。 ```javascript // 获取 select 元素 var selectElement = document.getElementById("mySelect"); // 删除最后一个选项 selectElement.removeChild(selectElement.lastElementChild); // 或者根据索引删除特定选项（例如删除索引为 2 的选项） selectElement.options[2] = null; ``` ### 示例代码 以下是一个完整的示例，展示了如何动态添加和删除 `<select>` 元素的选项： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Select Options</title> </head> <body> <select id="mySelect"> <option value="value0">Option 0</option> </select> <button onclick="addOption()">Add Option</button> <button onclick="removeOption()">Remove Option</button> <script> function addOption() { var newOption = document.createElement("option"); newOption.value = "value" + (document.getElementById("mySelect").options.length + 1); newOption.text = "Option " + (document.getElementById("mySelect").options.length + 1); document.getElementById("mySelect").appendChild(newOption); } function removeOption() { var selectElement = document.getElementById("mySelect"); if (selectElement.options.length > 0) { selectElement.removeChild(selectElement.lastElementChild); } } </script> </body> </html> ``` 以上代码中，`addOption` 函数用于添加新的选项，而 `removeOption` 函数用于删除最后一个选项。通过点击按钮触发这些函数，可以实现在页面上动态地管理 `<select>` 元素的选项[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值