5

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

有什么方法可以让浏览器识别这个改变？

提前致谢。

4

7 回答 7

7

在 Firefox 3.5 中对我来说很好用

工作演示

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

工作演示- 在 FireFox 和 IE 7 中测试和工作。

var foo = document.getElementById('foo');
var select = foo.getElementsByTagName('select');
select[0].options[0].text = ' two ';
于 2009-08-18T12:08:57.823 回答
3

最好给选择标签一个 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';
于 2009-08-18T12:08:29.993 回答
3

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

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

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

于 2009-08-18T14:07:18.297 回答
2

我猜你用的是IE？问题是您必须使用 new Option(...) 在 IE 中填充 SELECT。像这样：

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

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

于 2009-08-18T12:07:26.750 回答
1

我制定的解决方案如下 

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

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

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

注意：  predicting the first option code 如果你把它省略，第一个选项将失去它的选项标签，因此不会显示在新添加的 select-innerHTML

于 2010-08-18T14:23:17.617 回答
0

您正在使用replacewhich 需要 RegEx 作为第一个参数。

尝试这个：

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

这对你有用吗？

于 2009-08-18T13:26:51.207 回答
0

检查这个

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

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

于 2009-08-19T09:39:41.050 回答