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

Question

  <select>

        <option>One</option>

        <option>Two</option>

  </select>

I would like to append a new option between first and second option using javascript.

Required result :

 <select>

    <option> One </option>

    <option> New </option>

    <option> Two </option>

 </select>

Answer 1

Try this:

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

insertBefore will append the element before the selector indicated. In this case we choose the 2nd child option of our select. Remember that nth-child is not zero-based index.

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

Answer 2

使用eq(index)

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

Answer 3

In jQuery, you can use insertAfter function.

Documentation:

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

Example HTML:

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

Example jQuery:

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

jsFiddle:

https://jsfiddle.net/fx7xxhvq/

If you don't want to put an id on the element you want to insert after, any valid selector will work, such as the nth-child selector mentioned in the other answer.