Question

我有一个清单：

<select id = "opt">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

让我们这样做：

alert (document.getElementById('opt').innerHTML);

它会打印出来：

<select id = "opt"><option value="a">a</option><option value="b">b</option><option value="c">c</option></select>

还没问题。现在我更改所选项目：

for (var count = 0; count < document.getElementById('opt').childNodes[0].options.length; count++)
{
 if (document.getElementById('opt').childNodes[0].options[count].value == 'b') { document.getElementById('opt').childNodes[0].options[count].selected = true; break; }
}

再次打印：

alert (document.getElementById('opt').innerHTML);

它将再次打印：

<select id = "opt"><option value="a">a</option><option value="b">b</option><option value="c">c</option></select>

但我排除了类似的东西！

<select id = "opt"><option value="a">a</option><option value="b" **selected="selected"**>b</option><option value="c">c</option></select>

所以.innerHTML没有遵循这些变化。如何解决？

Answer 1

您看到的是属性和属性之间的区别。创建元素时，selected属性将复制到selected属性中。您正在更改属性，但这不会更改属性。

您可以在此处看到设置属性和attrute之间的区别：

http://jsfiddle.net/Guffa/Pec9j/

Answer 2

Java脚本是一种客户端语言。加载页面后，将应用javascript，因此不会更改已加载的页面源。如果您想知道选择了哪个元素 -

var value = opt.options[opt.selectedIndex].value;

我用JS更改了下拉框中的内容，但innerHTML不会返回更改的内容

2 个答案: