Question

我正在尝试动态更改用户在<select>下拉列表中看到的文字。如果我删除<!DOCTYPE html>标记，则以下工作正常。但Safari和Chrome不与<!DOCTYPE html>合作。不幸的是，在我的情况下，它不是可选的。

将id=添加到<option>标记并使用document.getElementById可以避免此问题，但遗憾的是我也无法使用它。此脚本必须按原样在页面中工作，因此我必须通过getElementsByTagName。

有什么建议吗？提前谢谢。

<!DOCTYPE html>
<html>
<head></head>
<body>

<select>
  <option label="Hi" value="1">Hello</option>
  <option label="Bye" value="2">Goodbye</option>
</select>

<script type="text/javascript">
   document.getElementsByTagName("option")[0].innerHTML = "Aloha";
   document.getElementsByTagName("option")[1].innerHTML = "Shalom";
</script>

</body>
</html>

Answer 1

您应该设置label属性而不是innerHTML，或者只删除标签属性。这应该有所帮助。

Answer 2

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Option relabel</title>
</head>
<body>

<select>
  <option label="Hi" value="1">Hello</option>
  <option label="Bye" value="2">Goodbye</option>
</select>

<script>
   var ops=document.getElementsByTagName("option");
   ops[0].removeAttribute('label');
   ops[1].removeAttribute('label');
   ops[0].text ="Aloha";
   ops[1].text="Shalom";
</script>

</body>
</html>

无法在Safari / Chrome中重写<option>文本</option>

2 个答案: