为 SELECT 对象增加或删除选项的方法在各浏览器中的支持情况不同

DOM2HTML SELECT元素操作
最新推荐文章于 2023-11-30 20:21:41 发布
转载 最新推荐文章于 2023-11-30 20:21:41 发布 · 1.9k 阅读 · 1
文章标签：

#浏览器 #null #button #interface #function #html

本文探讨了DOM2HTML规范下SELECT元素的操作方法，包括添加和删除OPTION元素的标准与非标准方式，分析了不同浏览器的支持情况，并提供了兼容性建议。

标准参考

DOM 2 HTML 中分别定义了 HTMLSelectElement、HTMLOptionsCollection 和 HTMLOptionElement 接口，它们分别定义了若干属性和方法来获知或操作 SELECT 及 OPTION 元素。

HTMLSelectElement 接口定义了以下属性及方法：

  • length: 获取 SELECT 元素中 OPTION 的数量；
  • options: 获取 SELECT 包含的 OPTION 元素集合，其返回值类型为 HTMLOptionsCollection；
  • add(element, before): 向 SELECT 中添加一个 OPTION，参数 element 指定要添加的 OPTION 对象，before 指定了插入到哪个 OPTION 之前，如果值为 'null'，则插入 SELECT 尾部；
  • remove(index): 从 SELECT 中删除一个 OPTION，参数 index 指定了要删除的 OPTION 索引。

HTMLOptionsCollection 接口是一个 OPTION 节点列表，可以通过索引或某个 OPTION 节点的 name 或 id 属性访问该 OPTION。 它定义了 'length' 属性，用来获取当前 OPTION 节点列表的长度，作用同 HTMLSelectElement 的 'length' 属性。

关于 HTMLSelectElement、HTMLOptionsCollection 和 HTMLOptionElement 接口的详细信息，请参考 DOM 2 HTML：Interface HTMLSelectElement、Interface HTMLOptionsCollection (introduced in DOM Level 2) 和Interface HTMLOptionElement。

问题描述

各浏览器对标准的支持有差异，并且他们实现了非标准的添加和删除 OPTION 元素的方法，在使用这些方法时，可能造成兼容性问题。

造成的影响

如果使用了存在兼容性问题的添加或删除 OPTION 元素的方法，将可能导致脚本异常，功能不可用。

受影响的浏览器

所有浏览器 

问题分析

除了标准提到的方法外，各浏览还实现了另外几种添加、删除 OPTION 元素的方法，各浏览器对这些方法的支持程度不一致。

非标准的添加 OPTION 的方法：

  • select.add(option)：SELECT 对象的方法，直接插入参数 option 到尾部；
  • select.add(option, index)：在指定的 OPTION 列表索引 index 之前插入参数 option；
  • options.add(option, before)：OPTION 节点列表（实现 HTMLOptionsCollection）的方法，效果同 HTMLSelectElement.add；
  • options.add(option)：同第一个方法；
  • options.add(option, index)：同第二个方法；
  • options[index] = option：直接在 OPTION 节点列表上添加元素。

非标准的删除 OPTION 的方法：

  • select.remove(option)：SELECT 对象的方法，删除参数指定的 OPTION 对象；
  • options.remove(index)：OPTION 节点列表的方法，同 HTMLSelectElement.remove；
  • options.remove(option)：同第一个方法；
  • options[index] = null：直接在 OPTION 节点列表上设置元素为 null。

分析以下代码：

 

<style type="text/css">select {height:100px;}</style>
<table>
  <tbody>
    <tr>
      <td>
        <select id="s1" multiple="multiple">
          <option value="1">111</option>
          <option value="2">222</option>
        </select>
      </td>
      <td>
        <select id="s2" multiple="multiple">
          <option value="1">111</option>
        </select>
      </td>
      <td>
        <select id="s3" multiple="multiple">
          <option value="1">111</option>
          <option value="2">222</option>
        </select>
      </td>
      <td>
        <select id="s4" multiple="multiple">
          <option value="1">111</option>
        </select>
      </td>
      <td>
        <select id="s5" multiple="multiple">
          <option value="1">111</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><button type="button" onclick="remove(1);">select.remove(index)</button></td>
      <td><button type="button" onclick="remove(2);">select.remove(option)</button></td>
      <td><button type="button" onclick="remove(3);">options.remove(index)</button></td>
      <td><button type="button" onclick="remove(4);">options.remove(option)</button></td>
      <td><button type="button" onclick="remove(5);">options[index] = null</button></td>
    </tr>
  </tbody>
</table>

<div style="border:2px solid;padding:3px;width:800px;" id="info"></div>


<script type="text/javascript">
  function $(id){return document.getElementById(id);}
  function newOpt(text, val){return new Option(text, val);} 1
  function info(method, msg){$("info").innerHTML += "<strong>" + method + "</strong> : " + msg + "<br />";}

  //创建n个 OPTION 对象
  var opt1 = newOpt("select.add(option, null)", 2),
    opt2 = newOpt("select.add(option)", 2),
    opt3 = newOpt("options.add(option, null)", 2),
    opt4 = newOpt("options.add(option)", 2),
    opt5 = newOpt("options[index] = option", 2),
    opt6 = newOpt("select.add(option, option)", 2),
    opt7 = newOpt("select.add(option, index)", 2),
    opt8 = newOpt("options.add(option, option)", 2),
    opt9 = newOpt("options.add(option, index)", 2),
    s1 = $("s1"),
    s2 = $("s2"),
    s3 = $("s3"),
    s4 = $("s4"),
    s5 = $("s5");

  //使用n种方法添加 OPTION 到 SELECT 中
  try { s1.add(opt1, null); } catch(e) { info("select.add(option, null)", e) }
  try { s2.add(opt2); } catch(e) { info("select.add(option)", e) }
  try { s3.options.add(opt3, null); } catch(e) { info("options.add(option, null)", e) }
  try { s4.options.add(opt4); } catch(e) { info("options.add(option)", e) }
  try { s5.options[1] = opt5; } catch(e) { info("options[index] = option", e) }

  try { s1.add(opt6, s1.lastChild); } catch(e) { info("select.add(option, option)", e) }
  try { s1.add(opt7, 1); } catch(e) { info("select.add(option, index)", e) }
  try { s3.options.add(opt8, s3.lastChild); } catch(e) { info("options.add(option, option)", e) }
  try { s3.options.add(opt9, 1); } catch(e) { info("options.add(option, index)", e) }

  function remove(type){
    var method = "";
    try {
      switch(type) {
        case 1 :
          method = "s1.remove(0)";
          break;
        case 2 :
          method = "s2.remove(s2.firstChild)";
          break;
        case 3 :
          method = "s3.options.remove(0)";
          break;
        case 4 :
          method = "s4.options.remove(s4.firstChild)";
          break;
        case 5 :
          method = "s5.options[1] = null";
          break;
      }
      eval(method);
    } catch (e) {
      info(method, e);
    }
  }
</script>



上述代码首先使用了标准及非标准方法向各 SELECT 元素中添加了 OPTION，然后点击各按钮使用各种删除方法删除 OPTION， 根据抛出的异常信息，我们可以辨别出哪些方法在浏览器中不支持，汇总测试结果如下表：2

typemethodIE6 IE7 IE8(Q)IE8(S) OperaFirefoxChrome Safari
add OPTIONselect.add(option, null)NYYY
select.add(option, option)NYYY
select.add(option, index)YYNN3
select.add(option)YYNY
options.add(option, null)NYN4N4
options.add(option, option)NYNN
options.add(option, index)YYYY
options.add(option)YYYY
options[index] = optionYYYY
remove OPTIONselect.remove(index)YYYY
select.remove(option)YYYY
options.remove(index)YYNY
options.remove(option)YYNY
options[index] = nullYYYY

注1：这里使用 new Option(text, value) 的方式创建新的 OPTION 对象，也可以使用 new Option([text[, value[, defaultSelected[, selected]]]]) 或 document.createElement("option") 创建。创建 OPTION 对象的方法于本文测试结果无影响。

注2：Y 表示支持该方法，N 表示不支持。

注3：并没有实现在指定索引前插入 OPTION 的功能，只是实现了向 SELECT 元素尾部插入元素。

注4：并不是向 SELECT 元素的尾部插入 OPTION，而是插入到 SELECT 的首部。

解决方案

1. 在添加 OPTION 元素时

  • 如果需要向指定索引前插入 OPTION，可以使用 options.add(option, index)；
  • 如果需要向 SELECT 尾部添加 OPTION，可以使用 options.add(option)；
  • 如果需要向指定索引处添加（或更改） OPTION，可以使用 options[index] = option。

2. 在删除 OPTION 元素时

  • 如果想删除指定索引处的 OPTION 元素，可以使用 select.remove(index) 或 options[index] = null；
  • 如果想删除某个指定的 OPTION 元素，可以使用 select.remove(option)；
  • 如果想删除 SELECT 中所有 OPTION，可以使用 select.length = 0 或 options.length = 0。
【使用JS 在selsect标签的指定位置添加选项option】
qq_45455554的博客
02-02 891
使用 JavaScript 在 select 元素的指定位置插入新的 option 选择可以通过以下步骤实现：1.首先，获取到需要插入 option 的 select 元素，可以通过元素的 id 或者其他方式获取到该元素的引用。例如，假设 select 元素的 id 为 “mySelect”，可以使用以下代码获取到该元素的引用：javascript2.创建一个新的 option 元素，并设置其属性和文本内容。3.使用 insertBefore() 方法将新的 option 元素插入到指定位置。
select 下拉菜单Option对象使用add(elements,index)方法动态添加,以及获取
choucui0160的博客
08-13 1871
今天在写项目时遇到问题，大概就是需要给后端返回一个查询的页数，直接写了个简单分页的方法， 首先使用select下拉菜单传递页数 第一次查询时，将startRow=1传递，会获得总数count，和第一页的信息。 在将count/每一页信息+1获得总页数，通过js动态生成到select上 ...
JQuery中对option的添加、删除、取…
飞雨飞羽飞鱼
08-12 703
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <div id="content" class= "content mod-cs-content text-content clearfix"> jQuery获取
(vue)element-ui表格中插入switch开关
nyf_unknow的博客
07-07 2489
【代码】(vue)element-ui表格中插入switch开关。
js记录
xystudent的博客
05-05 206
js记录
下拉列表select动态添加option和获取选中的option的值和value
withkai44的博客
11-30 7449
/动态的往select里面添加option(JS方式添加)两种方法获取选中的option的值和value。//拿到选中的option的value。//拿到选中的option的value。3、获取选中option的value。2、获取选中option的value。//Jquery动态添加option。//拿到选中的option的text。//拿到选中的option的text。2、获取选中的option的索引值。4、获取选中option的text。3、获取选中option的text。
JS动态添加与删除select中的Option对象(示例代码)
10-26
在JavaScript中，`select`元素是HTML中用于创建下拉列表的标签，而`option`则是下拉列表中的选项。...在实际开发中，可能还需要考虑到不同浏览器的兼容性问题，以及使用事件监听等方法来响应用户的操作。
js select option对象小结
10-26
JavaScript中的select对象是用于操作HTML中的<select>元素，而option对象则用于表示<select>元素内的一个选项。本文将对这两个对象进行详细解释，并涵盖相关的属性和方法，以便读者可以轻松地操作HTML的下拉菜单。 ...
el-select中使用el-checkbox去增加或删除select绑定的值会出现乱码
最新发布
04-04
并且在动态添加或删除项时保持一致性处理： ```javascript // 添加新值 if (!this.selectedValues.includes(newValue)) { this.selectedValues.push(newValue); } // 移除已有的值 this.selectedValues = this....
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
10-30
以下是一些基本的方法，涵盖了从新增、修改、删除到选中和清空Select选项等常见需求： 1. **判断Select选项中是否存在指定Value的Item** 使用`jsSelectIsExitItem`函数，你可以检查给定的Value是否已经在Select中...
JavaScript在IE中“意外地调用了方法或属性访问”
10-30
3. **DOM操作：** 在某些情况下，如果对DOM元素进行了修改（如替换、删除等），之后再试图访问该元素的属性或方法也可能引发此异常。 4. **脚本执行环境改变：** 如示例中通过改变`iframe`的`src`属性来重置其内容时...
JS对select动态添加options操作【IE&FF兼容】
hiteny的专栏
05-12 5572
<select id="ddlResourceType" onchange="getvalue(this)"> <br /> </select> <br /><br />     动态删除select中的所有options： <br />        document.getElementById("ddlResourceType").options.length=0; <br /><br />      动态删除select中的某一项option： <br />       
js实现select动态添加option
pjzz6666的博客
11-26 1558
  关于 select 的添加 option 应该注意的问题。 标准的做法如上也就是说，标准的做法是 s.options.add();但是如果你一定要用 s.appendChild(option);注意了，你只能用如下两种方式之一:1.       s.appendChild(option);     option.text = 'hello world';     option.value =...
options remove的问题
weixin_34085658的博客
12-15 350
很多朋友习惯用oSelect.options[n].remove()这样的方法来删除下拉框内的选项，而且这样在IE里也能很好的使用，但是很不幸的是这个不是标准方法，是微软的IE实现的一个方法，在firefox等其他浏览器里就不能被支持。标准的方法是把oSelect.options.length值改变来删除options，但是这样的话就不好灵活的删除某一个option了，不过还是有变通的办法，就在删...
动态给select下拉框添加option
热门推荐
Wdoves的博客
08-16 2万+
方法很多： 1.JQuery的方法： ///先定义一个数组  var data=new Array(); ///然后.............给数组data赋值 ............ ///最后把数组的值写入下拉框 for(var j=0;j&lt;data.length;j++)              $("#selectId").append("&lt;option val...
实现select动态添加option并选中的多种方法
phplife的电子商务网上商城专栏
02-13 4125
select动态添加option并选中，然后立刻把添加的option设为选中状态 普通的javascript实现方法一： var opt = document.createElement("OPTION"); opt.value = 6; opt.text  = "分类名"; opt.selected ="selected";    documtent.getElementById("
javascript操作Select标记中options集合
面对现实，忠于梦想
08-21 1510
导读： 先来看看options集合的这几个方法： options.add(option)方法向集合里添加一项option对象； options.remove(index)方法移除options集合中的指定项； options(index)或options.item(index)可以通过索引获取options集合的指定项； javascript代码如下：         var selectTag
select中option的增加、删除
sinat_39648402的博客
07-12 1万+
1.增加$('#id').append("&lt;option value= " + keyValue + "&gt;" + keyName + "&lt;/option&gt;");2.常规删除$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) $("#select_id option[index='0'
Supervisor｜源码剖析：Options.add() 源码详解
长行
11-09 192
在处理逻辑中，首先处理了有 flag 参数的情况。当有 Flag 参数时，只要给了该参数，那么该参数的 key 对应的 value 一定是 flag 参数的值。｜检查了短参数和长参数是否包含值的状态是否一致。参数值，值为参数名和参数值处理函数的元组），值为参数名和参数值处理函数的元组）和。，值为参数名和参数值处理函数的元组）和。｜解析短参数，检查后将短参数添加到。｜解析长参数，检查后将长参数添加到。参数不为空，则将参数添加到。字段初始化为 None，将。列表（元素为短参数）中。列表（元素为长参数）中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值