以编程方式扩展列表
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了以编程方式扩展列表相关的知识，希望对你有一定的参考价值。
使用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
如果你的目标是在列表中添加一个选项，你需要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>尝试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解决方案！
以上是关于以编程方式扩展列表的主要内容，如果未能解决你的问题，请参考以下文章