如何使用 jquery 动态创建选择元素的选项？答案

【问题标题】：How to create options of a select element dynamically using jquery?如何使用 jquery 动态创建选择元素的选项？
【发布时间】：2012-03-15 20:48:21
【问题描述】：

我需要通过 ajax 调用动态创建选择元素的选项。选项的数量及其内容会有所不同。这是在 ajax 调用之前的样子：

 <select name="groupid" style="width:100%;">
<option value="0" selected>(Please select an option)</option>
</select>

这是我创建具有虚拟值的选项元素的尝试之一：

$("<option></option>", {value: "999"}).appendTo('.select-group');

但它会在选择之外添加它。我也不知道怎么设置里面的文字。

有什么想法吗？我已经看到一些关于使用静态数量的现有选项填充现有选择表单的问题，但不是这样的。

谢谢。

【问题讨论】：

如果 '.select-group' 是您的 select 元素，那么它会起作用，尽管您可能也想给它一些文本：{value: "999", text: "999"}。
在这里阅读更多 - kvcodes.com/2016/10/…

标签： jquery

【解决方案1】：

.select-group 在哪里？如果您使用 #groupid 的 id，那么这应该可以正常工作...

$('<option>').val('999').text('999').appendTo('#groupid');

【讨论】：

【解决方案2】：

这是解决方案..

$('#yourSelectBoxId').append(new Option('optionName', 'optionValue'));

【讨论】：

【解决方案3】：

如果我理解正确，下面就是你需要的，

$("<option></option>", 
     {value: "999", text: "Nine Ninety Nine"})
    .appendTo('.select-group');

提供.select-group 是<select></select> 的选择器

【讨论】：

【解决方案4】：

这是替代解决方案。这对我有用。

$('#yourSelectBoxId').append("<option value='Saab'>Saab</option>");

【讨论】：

【解决方案5】：

这对我有用：

$('#chat_list').append(new Option(this.subject, this.key_remote_jid));

【讨论】：