以编程方式扩展 <select> 列表

Question

对于 bootstrap 项目，我有以下代码来构建一个区域，我可以在其中显示一组选项，可选择这些选项以进行进一步的操作。像这样：

<!--   List of entries -->
<select id="jobsList"  class="form-control" size="10">
    <option>abc</option>
    <option>def</option>
    <option>xyz</option>
</select>

对于那个 <option> 列表，我需要以编程方式扩展它，但找不到正确的编码。通过选择 'line on the list'（其中一个选项），我可以获得它的位置，但是任何 add/insert/etc 的尝试都会因 TypeError 而失败，如下所示：

$('#jobsList')[0].selectedOptions[0].before("<option>123</option>")
TypeError: $(...)[0].selectedOptions[0].before is not a function

也许我可以阅读所有 <option> 语句，插入我的新语句并将其写回 <select>。

不过应该还有别的办法，但是哪个呢？

注意：使用 Firefox 37

Answer 1

如果您的目标是向列表中添加一个选项，您需要 options，而不是 selectedOptions，并且您希望 add 而不是 before:

$("#jobsList")[0].options.add(new Option("text", "value"));

（第二个参数是可选的。好吧，第一个参数可能也是，但你不想要一个空白选项。）

示例：

var list = $("#jobsList")[0];
var n;
for (n = 1; n < 4; ++n) {
  list.options.add(new Option("Option " + n, n));
}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<select id="jobsList" class="form-control"></select>
</form>

Answer 2

尝试了 T.J.Crowder 的回答，但没有找到将附加选项放置在给定位置的解决方案。另一个线程的另一个答案最终有所帮助：

没有在给定的地方放置 (jobNo) $("#jobsList")[0].options.add(new Option(cJob, jobNo));

以下代码即可。 var x = document.getElementById("jobsList"); var option = document.createElement("option"); option.text = cJob; var sel = x.options[x.selectedIndex]; x.add(option, jobNo); 认为还有 jQ 解决方案！？

以编程方式扩展 <select> 列表

Extending a <select> list programmatically

jquery

twitter-bootstrap