Question

我有像这样的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，我可以看到它现在已被更改，但在浏览器中它仍显示旧选项。

有没有办法让浏览器识别出这种变化？

提前致谢。

Answer 1

在Firefox 3.5中适用于我

<强> Working Demo

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

Working Demo - 在FireFox和IE 7中测试并使用。

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

Answer 2

最好为select标签指定一个id，并使用new选项添加一个项目。

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';

Answer 3

设置select的innerHTML在IE中有一个错误。不确定他们是否已将其固定为7或8。它会切断您提供的一些文本，因此选项格式不正确。所以你必须设置包含select的outerHTML。由于outerHTML只是IE（或者是），我通常使用select.parentNode.innerHTML。我将ID分配给选择。但是既然你正在设置div的innerHTML，那么你已经被覆盖了。那只是一个FYI。

我认为你真正的问题是，替换是期望第一个参数的正则表达式。或者选项元素不是您所期望的。 IE可以大写选项名称，也可以添加选定的属性。在尝试执行字符串替换之前，您应该提醒innerHTML以查看它是什么。然后我会使用有效的正则表达式来进行替换。你可能不得不用反斜杠来逃避斜线。我不认为你需要逃避尖括号，但我不是百分之百。

另外根据我的经验，DOM方法（新选项）速度较慢。当你必须更换大量选项时，它会明显变慢。如果您只需要替换一个或两个，则可以使用DOM方法。

Answer 4

我猜您使用的是IE？问题是你必须使用新的Option（...）来填充IE中的SELECT。像这样：

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

编辑：有关于此错误的Microsoft知识库文章：http://support.microsoft.com/kb/276228

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字符串。

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

请注意：＆amp; nbsp 预先设定第一个选项代码如果你把它排除在外，第一个选项会松开它的选项标签，因此新增的select-innerHTML

将不会显示

Answer 6

你正在使用replace，它需要一个RegEx作为第一个参数。

试试这个：

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

这对你有用吗？

Answer 7

检查

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

如果不能正常工作，请更改浏览器。

innerHTML替换不反映

7 个答案: