Question

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

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

对于<option>列表，我需要以编程方式扩展它，但无法找到正确的编码。选择列表中的＆＃39;行＆＃39; （其中一个选项）我可以得到它的位置但是任何添加/插入/ 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>列表</select>

2 个答案: