Question

我有一个基本清单：

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

现在我必须更改JS中的选定项目。它完成了，然后我需要这些选择项的内容（.innerHTML）。但遗憾的是，innerHTML没有选择任何内容......如何解决这个问题？

编辑：这是代码：

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

并且alert()只显示原始HTML代码

Answer 1

你可以这样做

var opt = document.getElementById("opt");
var listLength = opt.options.length;
for(var i =0; i< listLength; i++) {
   if(opt.options[i].selected) {
      opt.options[i].textContent = 'the change HTML';
   }
}

Demo

Answer 2

您可以在不使用选项的情况下执行此操作。

只解析元素的节点

for (var count = 0; count < document.getElementById('opt').childNodes.length; count++)
{
    if (document.getElementById('opt').childNodes[count].value == "c") {       
        document.getElementById('opt').childNodes[count].selected = true; break; 
    }
}
var obj = document.getElementById('opt');
alert (obj.innerHTML);

这是你工作的jsfiddle：http://jsfiddle.net/9Pg8n/1/

Answer 3

您可以从所选选项中读取文本和值，如下所示：

var elem=document.getElementById('opt');
var value=elem[elem.selectedIndex].value;
var text=elem[elem.selectedIndex].text;

如果您确实需要所选option元素的HTML：

var text=elem[elem.selectedIndex].outerHTML;

如果您查看select的{{1}}，您可以在IE中看到innerHTML属性，但似乎其他浏览器不会反映该属性的更改。这也代表selected。

要解决此问题，您需要手动设置属性：

option.outerHTML

但是，这对IE中的elem[elem.selectedIndex].setAttribute('selected','true'); - 值没有影响，因此您在其他浏览器中会得到略有不同的HTML。

innerHTML

不幸的是，即使更改了所选元素，此set属性仍然存在。因此，必须在使用后删除该属性：

<OPTION selected ...> // IE
<OPTION selected="true"...> // Other browsers

但是......这会导致Chrome出现问题：它会从elem[elem.selectedIndex].removeAttribute('selected');返回-1。您必须在设置属性之前将elem.selectedIndex存储在变量中，然后再次设置正确的选择：

selectedIndex

如果更改框发生更改，innerHTML将不会更改

3 个答案:

Demo