添加选项以进行选择不起作用

我想添加一个选项以使用下面的代码进行选择。但是在实际页面上没有任何变化。添加选项以进行选择不起作用

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>

所以日志包含奇异果，但是当我打开网页它不存在。什么可能是错的？

来源

2016-11-14 user2817869

尝试'x.appendChild（option）;'。 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement – nurdyguy

你的代码工作正常。它添加只是将你的代码包装在window.onload – Geeky

似乎工作正常。 https://jsfiddle.net/obbfLfpk/ – isherwood

-2

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

来源

2016-11-14 22:15:31

不是一个真正的答案。 –

任何错误从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/

来源

2016-11-14 22:16:06

它的工作正常，由OP发布。为什么这种改变是必要的？ – isherwood

我不知道节点的标准'添加'方法。我只知道这里指定的appendChild https://developer.mozilla.org/en-US/docs/Web/API/Node –

我会同意使用appendChild（）对其他代码更统一，而不是特定的'add（）'方法，它只适用于通过'HTMLSelectElement'接口选择元素。 'add（）'确实有额外的功能，如果使用的话，可能是给予'add（）'优先的理由。 –

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>

希望它可以帮助

来源

2016-11-14 22:17:27 Geeky

标识使之成为一个功能，但你可以用一个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>

来源

2016-11-14 22:23:19

作品对我来说，当我将这个脚本放在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>

来源

2016-11-14 22:26:08

添加选项以进行选择不起作用

回答

相关问题