javascript - 我用 JS 在下拉框中更改了一些内容，但 innerHTML 不会随更改的内容返回

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您正在更改属性，但这不会更改属性。

您可以在这里看到设置属性和属性之间的区别：

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

Answer 2

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

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