JavaScript更改下拉菜单选项文本

Question

我正在尝试通过JavaScript修改第一个选择选项的文本，但它会清空整个选择选项。

 <select name='stuff'>
      <option value="a"> Pepsi </option>
      <option value= "b"> Juice </option>
 </select>


<script type="text/javascript">
    document.getElementsByName('stuff')[0].innerHTML = "Water";
</script>

- meWantToLearn

---

如果你只是在设置文本，使用 textContent 而不是 innerHTML。 - ndugger

@RokoC.Buljan 这取决于他的目标平台，但是您可以使用innerText和textContent的组合，但innerHTML在这里几乎不适用。 - ndugger

@NickDugger 你能解释一下为什么innerHTML不太合适吗？以及为什么要从textContent回退到innerHTML？ - Roko C. Buljan

@RokoC.Buljan innerHTML 会触发重新渲染，而 textContent 不支持 IE8 及以下版本。我会选择使用 innerText，但从用户角度来看，他/她不会注意到这种区别。 - Frinsh

@Frinsh 仅供记录，FF不支持innerText，因此您需要做一个简短的polyfill，在这种情况下，您应该填充textContent，而不是反过来。 - ndugger

Answer 1

您想从选项集合中读取并修改其中的第一个元素。

document.getElementsByName('stuff')[0].options[0].innerHTML = "Water";

- CodingIntrigue

---

难道不应该是：document.getElementsByName('stuff').options[0].innerHTML = "Water"; - Andre Nel

@AndreNel 不是的， getElementsByName 返回一个类似数组的对象，所以你要选择该数组中的第一个 :) - CodingIntrigue

啊，我明白了，它使用的是 getElementsByName，我一直在想 getElementById... 所以我一直在想：document.getElementById('stuff').options[0].innerHTML = "Water"; ... 这只获取一个选择器，但是根据 Id 而不是名称，而不是给出的内容：document.getElementsByName('stuff')[0].options[0].innerHTML = "Water"; ... 抱歉... :) - Andre Nel

Answer 2

你可以尝试这样做：

 $('select[name=stuff] option:first').html("abcd");

- Satya Ranjan Sahoo

---

OP没有要求jQuery，这个问题也没有使用jQuery标签。 - ndugger

同一个问题，我想使用jQuery - 感谢您的贡献。 - Genki

Answer 3

我认为这应该可以工作：

 <select name='stuff'>
          <option id="first" value="a"> Pepsi </option>
          <option value= "b"> Juice </option>
     </select>


    <script type="text/javascript">
        document.getElementById("first").innerHTML = "Water";
    </script>

- Florin Pop

---

也可以这样写：document.getElementById("first").text= "水"; - Paweł Piwowar