添加选择选项不起作用
[英]Adding option to select does not work
问题描述
我正在尝试添加一个选项，以使用下面的代码进行选择。 但是实际页面上没有任何变化。
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，但是当我打开页面时，它不存在。 有什么可能是错的吗？
5 个解决方案
解决方案1
0 2016-11-14 22:16:06
从https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild ：
Node.appendChild（）方法将一个节点添加到指定父节点的子节点列表的末尾。 如果给定的子对象是对文档中现有节点的引用，则appendChild（）将其从其当前位置移动到新位置（在将其附加到其他节点之前，不需要从其父节点中删除该节点）。
如果要将某些内容附加到任何dom元素，请在父元素上使用appendChild(theChild) 。 正如Mike Brant指出， add(item, before)应该没问题。 （参考： https : //developer.mozilla.org/zh-CN/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/
解决方案2
0 2016-11-14 22:17:27
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>
希望能帮助到你
解决方案3
0 2016-11-14 22:23:19
将其ID转换为函数，但也可以通过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>
解决方案4
0 2016-11-14 22:26:08
当我将脚本放在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>
解决方案5
-2 2016-11-14 22:15:31
尝试删除JavaScript，看看它是否有效。 如果这样做，可能意味着您的JavaScript代码有一些错误，但是对于html代码，我真的看不到任何错误
为什么“onfocus”不适用于多选选项，而“onclick”则可以？
[英]why 'onfocus' does not work on multiple select option, and 'onclick' does?
为什么向选项元素动态添加选项会更改其selectedIndex？
[英]Why does dynamically adding an option to a select element alter its selectedIndex?
添加许多具有不同扩展名的保管箱选择器选项不起作用
[英]Adding many dropbox choosers with different extensions option does not work
为什么我的自定义AngularJS指令在select选项中不起作用？
[英]Why does my custom AngularJS directive not work within a select option?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.