Question

我正在尝试添加一个选项，使用下面的代码进行选择。但实际页面上没有任何变化。

var x = document.getElementById("UserField");
var option = document.createElement("option");
option.text = "Kiwi";
x.add(option);
console.log(document.getElementById("UserField"));

我从console.log获得的是：

<select id="UserField" class="jqTransformHidden">
  <option value="">(choose one)</option>
  <option value="0">1</option>
  <option value="1">2</option>
  <option value="2">3</option>
  <option value="3">4</option>
  <option value="4">5</option>
  <option>Kiwi</option>
</select>

因此日志包含Kiwi但是当我打开页面时它不在那里。什么可能是错的？

Answer 1

来自https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild：

Node.appendChild（）方法将节点添加到列表的末尾指定父节点的子节点。如果给定的孩子是参考对于文档中的现有节点，appendChild（）将其从中移出当前职位到新职位（没有要求在将节点附加到其他节点之前，将节点从其父节点中删除节点）。

如果要将内容附加到任何dom元素，请在父元素上使用appendChild(theChild)。正如迈克布兰特所指出的那样add(item, before)也应该没问题。（参考：https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/add）

<强>答案：

确保在dom准备就绪时执行脚本（onload或DOMContentLoaded）。

来自https://developer.mozilla.org/de/docs/Web/API/GlobalEventHandlers/onload：

加载事件在文档加载过程结束时触发。在至此，文档中的所有对象都在DOM中，而且都是图像，脚本，链接和子框架已完成加载。

function load() {
  // execute your code here
}
window.addEventListener("load", load);

您可以查看此jsfiddle：https://jsfiddle.net/pfc7fhkm/3/

Answer 2

window.onload = function() {
  var x = document.getElementById("UserField");
  var option = document.createElement("option");
  option.text = "Kiwi";
  x.add(option);
  console.log(document.getElementById("UserField"));
}

<select id="UserField" class="jqTransformHidden">
  <option value="">(choose one)</option>
  <option value="0">1</option>
  <option value="1">2</option>
  <option value="2">3</option>
  <option value="3">4</option>
  <option value="4">5</option>

</select>

希望有所帮助

Answer 3

我把它变成了一个函数但是你也可以用jQuery点击来实现它

如果附加到按钮的onclick功能，这将有效：

<script>
var mydropdown = $('#UserField');
function add(){
    mydropdown.append("<option>"+$(this).val()+"</option>");
}
</script>

这也适用于点击

<script>
var mydropdown = $('#UserField');
var mybtn = $('#buttonId');
mybtn.click(function(){
     mydropdown.append("<option>+$(this).val()+"</option>");
 });
</script>

Answer 4

当我将脚本放在HEAD部分时，

对我有用。猕猴桃出现了。你在哪里放置你的java脚本？我包括完整的代码。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
        <script type="text/javascript">
            var x = document.getElementById("UserField");
            var option = document.createElement("option");
            option.text = "Kiwi";
            x.add(option);
    </script>
</head>
<body>
    <select id="UserField" class="jqTransformHidden">
  <option value="">(choose one)</option>
  <option value="0">1</option>
  <option value="1">2</option>
  <option value="2">3</option>
  <option value="3">4</option>
  <option value="4">5</option>
  <option>Kiwi</option>
</select>
</body>
</html>

Answer 5

尝试删除JavaScript并查看它是否有效。如果它这样做可能意味着你的JavaScript代码有一些错误，但对于HTML代码我真的没有看到任何错误

添加选项选项不起作用

5 个答案: