在select元素中的随机位置附加选项？

Question

  <select>

        <option>One</option>

        <option>Two</option>

  </select>

我想使用javascript在第一个和第二个option之间添加一个新的option。

必填结果：

 <select>

    <option> One </option>

    <option> New </option>

    <option> Two </option>

 </select>

Answer 1

试试这个：

$('<option> New </option>').insertBefore('select option:nth-child(2)');

insertBefore将在选择器指示之前附加元素。在这种情况下，我们选择我们选择的第二个孩子option。请记住，nth-child不是从零开始的索引。

JSFiddle ：https://jsfiddle.net/58209tgu/

Answer 2

使用eq(index)

$('<option />').text('New').insertAfter('select option:eq(0)');

Answer 3

在jQuery中，您可以使用insertAfter函数。

<强>文档

http://api.jquery.com/insertafter/

示例HTML：

<select>
  <option id='insertAfterMe'>One</option>
  <option>Two</option>
</select>

示例jQuery：

$(function(){
  $('<option>new option</option>').insertAfter('#insertAfterMe');
});

<强>的jsfiddle：

https://jsfiddle.net/fx7xxhvq/

如果您不想在之后插入的元素上添加id，则任何有效的选择器都可以使用，例如另一个答案中提到的第n个子选择器。