如何在香草javascript中动态添加选项到现有选择

Question

我想使用纯javascript动态添加选项到选择中。 我能找到的一切都涉及 JQuery 或尝试动态创建选择。 我能找到的最接近的事情是在 Javascript 中使用选项动态添加输入类型选择，后者是我发现的唯一不涉及 JQuery 的选项。 尽管我确实尝试过像这样使用它：

daySelect = document.getElementById('daySelect');
daySelect.innerHTML += "<option'>Hello world</option'>";
alert(daySelect.innerHTML)

在我这样做之后，选择没有任何变化，并且警报给了我

HELLO WORLD</option'>

如果这很简单，我深表歉意，但总的来说，我对 javascript 和 Web 编程很陌生。 感谢您提供任何帮助。

编辑：所以我尝试了这样的给定建议。

daySelect = document.getElementById('daySelect');
myOption = document.createElement("option");
myOption.text = "Hello World";
myOption.value = "Hello World";
daySelect.appendChild(myOption);

这根本没有改变页面中的选择。 知道为什么吗？ 我确实检查了代码是否正在运行并发出警报。

编辑：这个想法确实奏效了，结果发现它没有在下拉列表中显示值。 我不知道为什么，但我可以弄清楚我认为的那个。

Answer 1

本教程准确地展示了您需要做的事情：使用 javascript 将选项添加到 HTML 选择框

基本上：

 daySelect = document.getElementById('daySelect');
 daySelect.options[daySelect.options.length] = new Option('Text 1', 'Value1');

Answer 2

我想这样的事情会做的工作。

var option = document.createElement("option");
option.text = "Text";
option.value = "myvalue";
var select = document.getElementById("daySelect");
select.appendChild(option);

Answer 3

最简单的方法是：

selectElement.add(new Option('Text', 'value'));

是的，就这么简单。 它甚至可以在 IE8 中使用。 并有其他可选参数。

请参阅文档：

Answer 4

使用 document.createElement 函数，然后将其添加为您选择的子项。

var newOption = document.createElement("option");
newOption.text = 'the options text';
newOption.value = 'some value if you want it';
daySelect.appendChild(newOption);

Answer 5

.add() 也可以。

var daySelect = document.getElementById("myDaySelect");
var myOption = document.createElement("option");
myOption.text = "test";
myOption.value = "value";
daySelect.add(myOption);

W3 学校 - 尝试

Answer 6

尝试这个;

   var data = "";
   data = "<option value = Some value> Some Option </option>";         
   options = [];
   options.push(data);
   select = document.getElementById("drop_down_id");
   select.innerHTML = optionsHTML.join('\n');

Answer 7

<html>
    <head></head>
    <body>
        <select id="ddl"></select>
    </body>
    <script>
        var ddl = $("#ddl");
        ddl.empty();
        ddl.append($("<option></option>").val("").html("--Select--"));
    </script>
</html>

如何在香草javascript中动态添加选项到现有选择

问题描述

7 个解决方案

解决方案1
117 已采纳 2013-07-18 17:56:10

解决方案2
22 2013-07-18 17:53:46

解决方案3
16 2019-04-28 22:41:09

解决方案4
5 2013-07-18 17:55:21

解决方案5
3 2017-07-05 18:39:22

解决方案6
0 2014-07-10 16:36:55

解决方案7
-1 2021-03-12 12:54:53

如何在香草javascript中动态添加选项到现有选择

问题描述

7 个解决方案

解决方案1 117 已采纳 2013-07-18 17:56:10

解决方案2 22 2013-07-18 17:53:46

解决方案3 16 2019-04-28 22:41:09

解决方案4 5 2013-07-18 17:55:21

解决方案5 3 2017-07-05 18:39:22

解决方案6 0 2014-07-10 16:36:55

解决方案7 -1 2021-03-12 12:54:53

解决方案1
117 已采纳 2013-07-18 17:56:10

解决方案2
22 2013-07-18 17:53:46

解决方案3
16 2019-04-28 22:41:09

解决方案4
5 2013-07-18 17:55:21

解决方案5
3 2017-07-05 18:39:22

解决方案6
0 2014-07-10 16:36:55

解决方案7
-1 2021-03-12 12:54:53