innerHTML的替换没有反映出来

Question

我有类似以下的HTML代码：

我有一些HTML内容

<div id="foo">
<select>
<option> one </option>
</select>
</div>

当我使用

时

document.getElementById('foo').innerHTML = document.getElementById('foo').innerHTML.replace("<option> one </option>", "<option> two </option>") ;

innerHTML被替换了，但在浏览器中没有反映出来。

如果我警报innerHTML，我可以看到它已经改变了，但在浏览器中仍然显示旧选项。

有没有办法让浏览器识别这个更改？

提前致谢。

- Sourabh

Answer 1

在Firefox 3.5中对我来说很好用。

演示

编辑：您必须使用IE。您需要创建一个新选项并将其添加到元素中，或者修改现有选项的文本。

演示 - 在FireFox和IE 7中经过测试并且可用。

var foo = document.getElementById('foo');
var select = foo.getElementsByTagName('select');
select[0].options[0].text = ' two ';

- Russ Cam

Answer 2

更好的方法是给选择标签分配一个id，然后使用新选项添加项目。

var sel =document.getElementById ( "selectElementID" );
var elOptNew = document.createElement('option');
elOptNew.text = 'Insert' + 2;
elOptNew.value = 'insert' + 2;
sel.options.add ( elOptNew );

如果您需要更换选项

sel.options[indexNumber].text = 'text_to_assign';
sel.options[indexNumber].value = 'value_to_assign';

- rahul

Answer 3

在IE中，设置select的innerHTML存在一个bug。不确定他们是否已经在7或8中修复了这个问题。它会截断你给它的一些文本，从而导致选项格式不正确。因此，你必须设置包括select在内的outerHTML。由于outerHTML只适用于IE（或曾经适用），我通常使用select.parentNode.innerHTML。并将ID分配给select。但是，由于您正在设置div的innerHTML，因此您已经涵盖了这一点。这只是一个提示。

我认为你真正的问题是replace期望第一个参数是正则表达式。或者option元素不是你期望的。IE可能会将选项名称大写，并添加selected属性。在尝试进行字符串替换之前，你应该弹出innerHTML以查看它是什么。然后我会使用有效的正则表达式来进行替换。你可能需要用反斜杠转义斜杠。我不认为你需要转义尖括号，但我不是100%确定。

还有根据我的经验，DOM方法（new Option）速度较慢。当你必须替换大量选项时，它会显着变慢。如果你只需要替换一两个，你可以使用DOM方法。

- Will Rickards

---

有人终于以简单明了的方式描述了我的问题（和解决方案）。谢谢！我太高兴了，我要查看你的其他答案，看看哪些没有得到应有的赞扬... - Patrick Karcher

Answer 4

我猜你正在使用IE浏览器？问题是在IE中，你必须使用new Option(...)来填充SELECT。像这样：

document.getElementsByTagName('select')[0].options[0]=new Option(' two ');

编辑：关于这个漏洞，微软知识库有一篇文章：http://support.microsoft.com/kb/276228

- kanngard

Answer 5

我想到的解决方案如下：

strHTML = "&nbsp;<option value=""1"">Text1</option>"
strHTML = strHTML + "<option value=""15"">Text2</option>"
strHTML = strHTML + "<option value=""17"">Text3</option>"


document.getElementById("id-selectbox").innerHTML=strHTML;
if(Browser=="Internet Explorer"){
    document.getElementById("id-selectbox").outerHTML=document.getElementById("id-selectbox").outerHTML;
}

可以通过 AJAX 请求获取 HTML 字符串。

结果是浏览器将使用其新添加的选项重写/渲染选择框。

请注意：在第一个选项代码之前有&nbsp。如果您省略此内容，则第一个选项将失去其选项标记，因此不会显示在新添加的 select-innerHTML 中。

- N. Kramer

Answer 6

你正在使用replace，它需要作为第一个参数一个正则表达式。

尝试这样做：

document.getElementById('foo').innerHTML = document.getElementById('foo').innerHTML.replace(/<option> one <\/option>/, "<option> two </option>");

这个对你有用吗？

- fphilipe

---

不，第一个参数也可以是子字符串。请查看W3C规范。 - jmishra

Answer 7

请检查这个

document.getElementById('foo').innerHTML.replace("<option> one </option>", "<option> two </option>") ;

如果不起作用，请更换浏览器。

- Biju CD