以编程方式扩展列表

Question

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

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

对于那个<option>列表，我需要以编程方式扩展它，但找不到正确的编码。通过选择列表中的“行”（其中一个选项），我可以得到它的位置，但是任何添加/插入/ 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解决方案！