ie6 option innerHTML 关于select 的添加 option 应该注意的问题

最新推荐文章于 2021-09-12 21:15:27 发布
最新推荐文章于 2021-09-12 21:15:27 发布
阅读量385 收藏
点赞数
分类专栏： 私人收藏 文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_3751/article/details/82368937
版权

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Untitled Page</title>

</head>

<body οnlοad="f()">

<select id="s">

    <option value="55">就是这样的。</option>

</select>

</body>


<script>

function f(){

    var s = document.getElementById('s');

    for(var i=0; i<10; i++){

        var option = document.createElement('option');

        //s.insertBefore(option,s.options[0]);

        /* 标准做法使用 s.options.add() */

        s.options.add(option)

      /* 非标准做法就是用 insertBefore 或者 appendChild */

      //s.appendChild(option);

       option.text = 'hello' + i;

      //option.innerHTML = 'Hello' + i;

       option.value = i;

  //  s.appendChild(option);

    }

    /* 当且仅当用 s.options.add() 添加项时才有效 */

    s.selectedIndex = 4 ;

}

</script>

</html>



 

 

 

 

 关于 select 的添加 option 应该注意的问题。

标准的做法如上
 
 
也就是说，标准的做法是 s.options.add();
但是如果你一定要用 s.appendChild(option);
注意了，你只能用如下两种方式之一:
1.  
     s.appendChild(option);
     option.text = 'hello world';
     option.value =3;
   也就是，一定要先添加到 select 中，然后再为 option 赋值。否则在 FF 下是显示正常的，但是在 IE6 中显示的是空白
 
2. 如果你要讲 option.text 和 option.value 的赋值放在前面，那么请用 option.innerHTML 而不是 option.text
  如下: 
    option.innerHTML = 'hello world';
    opion.value = 3;
    option.appendChild(option);
 
 
又看了一个牛人的博客，得到了第三种解决方式。
 
var op=document.createElement("option");      // 新建OPTION (op) 
op.setAttribute("value",0);          // 设置OPTION的 VALUE 
op.appendChild(document.createTextNode("请选择---")); // 设置OPTION的 TEXT
 
select.appendChild(op);           // 为SELECT 新建一 OPTION(op)
 
 
也就是所，你的 op 的text 是通过 appendChild(.... createTextNode ) 来进行的。。
iteye_3751
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决IE下select标签innerHTML插入option的BUG（兼容IE,FF,Opera,Chrome,Safari)
09-05
在ie下面使用innerHTML来插入option选项的话，ie会去掉前面的，并拆分成多个节点，这样会造成select的出错
ie6中select动态添加option并设置其value
HelloWorld
12-09 195
    在ie6中使用jquery的select.attr('value',xx);时在ie6中会报错，不能正确设置其值，解决方法就是在设置值的代码块周围加上setTimeout，如： window.setTimeout(function(){//ie6需要稍微延迟 select.attr('value',xxx); }, 100);  为什么呢？s...
JS中用innerHTML生成<select>的问题
llm610的专栏
07-01 842
[code="html"] function a(){ var c = document.getElementById("t1"); c.innerHTML=""; c.innerHTML+=""+'aaaa'; c.innerHTML+=""+'bbbb'; c.innerHTML+=""+'cccc'; c.innerHTML+="&qu
使用bBank.js解决IE下select标签innerHTML插入option的BUG
实践出真知
08-19 955
Bug描述：在IE下面使用innerHTML来插入option选项的话，IE会去掉前面的。 var sltObj=document.getElementById('xx');//获取select对象，这里只是给个例子，可以按自己习惯来获取 function addOption(obj, arg) { if (b$.type.isElement(arg)) { if (b$.brows
select设置innerHMTL
weixin_30697239的博客
04-28 163
select控件在标准浏览器下可以直接innerHTML设置内容，IE则不行。 HTML结构： <form name="form1"> <select name="select1"></select> </form> 先看直接使用select.innerHTML var form = document.forms...
js添加select下默认的option的value和text的方法
10-25
当需要向select元素动态添加选项时，我们可以使用JavaScript来创建option元素，并将其添加到select中。这个过程可以通过原生JavaScript API实现。 2. 原生JavaScript操作DOM来创建option： ```javascript // 假设...
IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法
09-05
其中一个经典的问题就是尝试使用JavaScript的innerHTML属性来修改表格（Table）或选择列表（Select）的内容，但在IE6、7、8、9版本中，这可能会遇到一些挑战。innerHTML属性通常用于设置或获取元素的HTML内容，但在...
向元素中动态添加option
08-10
这篇博客“向<select>元素中动态添加option”探讨的就是如何在JavaScript或jQuery的帮助下，实现在用户界面中动态地向`<select>`元素添加选项。 JavaScript是一种广泛使用的客户端脚本语言，它可以操作HTML元素，...
[举一反三]解决IE下select标签innerHTML插入option的BUG（兼容IE,FF,Opera,Chrome,Safari)
weixin_33749242的博客
05-13 109
前言： 这是一个老bug了，现在提供一个完美解决方案。由于我一直是用createElement来创建动态的option并添加，所以一直没有遇到这个问题，但是每个人写代码风格不同，有的人就喜欢写字符串形式的标签并用innerHTML插入，这不就有问题了，为了方便不同编码风格的人，我封装了一个方法，用于解决ie的这个bug和兼容5大浏览器，这样大家都可以用一个方法来实现不同的风格，便于维护管理。 ...
通过改变innerHTML的内容，动态增加选择项
热门推荐
冯立彬的博客
07-10 1万+
    我们遇到过这样的情况，有些邮箱中有让我增加附件的时候，想增加多少点击增加就可以了，可是却不知道怎么实习的，我看了一下，其实就是运用了一个innerHTML而已，下面我做了一个实例，这是个人的习惯，就是一给自己一个好的记忆存储，也方便需要查找资料的朋友，下面就是一个简单的例子：根据JAVASCRIPT设置innerHTML//这个函数是根据用户设置的数字去重新生成innerHTMLfunct
解决IE下select标签innerHTML插入option的BUG（兼容
weixin_34292924的博客
11-29 299
在ie下面使用innerHTML来插入option选项的话，ie会去掉前面的&lt;option&gt;，并拆分成多个节点，这样会造成select的出错   前言： 这是一个老bug了，现在提供一个完美解决方案。由于我一直是用createElement来创建动态的option并添加，所以一直没 有遇到这个问题，但是每个人写代码风格不同，有的人就喜欢写字符串形式的标签并用innerHTML插入...
如何让select标签里的某个option被选中
weixin_45059962的博客
05-11 1530
<select class="form-control" name="jobType" > <option th:selected="${job.jobType}=='老师'?'true':'false'">老师</option> <option th:selected="${job.jobType}=='程序员'?'true':'false'">程序员</option> <option th:selected="${
ie6.0中关于动态改变html中select标签中option的处理方法
zhanshenggaoyang的专栏
03-01 1492
网上很多相关资料都提到ie6.0的option这个bug，就是在 中我想将select中的内容换为 我们会用JavaScript来操作 比如select=document.getElementById("tag") select.innerHTML=" " 这样在火狐中显示没问题 在ie6.0中，会出现要替换的内容变成
html多出字段显示不出来,替换多个选择中的html选择选项字段的innerHTML文本的一部分不起作用...
weixin_29022821的博客
06-09 206
var filterstack = {};var objSelected = {};function SelectMultiple(field, isAction, paneId) {//the first paramater might be "this" or the field id.if (typeof field == "string")field = $(field);field.on...
用innerHTML实现二级联动菜单
de_debug的博客
07-20 661
最近小编我在做二级联动菜单的时候，上网查了一些资料，发现他们用的是二位数组，发现他们写的有点麻烦，对于小编我这种初入JS的小白来说，好费力。所以自己就琢磨着想通过获取select标签中value值来相应的往另一个select标签中插入option标签不就行了么？果然没问题！代码附上： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;met...
html 多项选择,选项标签中的HTML多字段选择
weixin_39794340的博客
06-03 926
这可以通过switch语句实现，但这不是最好的方法。我建议将以下函数作为change事件的事件处理程序。您还需要在窗口加载时运行它，以初始化它。function updateSel() {var sel = document.getElementById('sel');var hidden = sel.getElementsByClassName('hidden');for (var i=0;iv...
innerText,innerHTML和value的区别，以及如何获取下拉框中选中的项的文本内容。
Csdn_____c的博客
09-12 1482
一、innerText和innerHTML异同点： 相同点：二者都可以获取到标签内包含的文本值。 从结果可以看出二者都是获取到了h1标签内的文本h1，并且二者相等，说明两个方法拿出来的内容都是以相同的形式展现。 不同点：innerText是获取到标签内的文本节点的值，而innerHTML是获取到标签内所有的内容，包括了子元素标签本身也会被获取到，如下图： 从输出结果可以看出innerText可以获取到本身标签内部包含的所有文本值，但是不包含子元素的标签，而...
HTML select option详解：创建、操作与属性
`<option>`元素则定义了下拉列表中的选项，其`value`属性用于设置选项的值，而`innerHTML`或`textContent`用于设置显示的文本。例如，`<option value="val1">Option1</option>`。 在JavaScript中，我们可以通过`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值