<select>

        <option>One</option>

        <option>Two</option>

  </select>

Me gustaría agregar un nuevo option entre el primero y el segundo option usando javascript.

Resultado requerido:

 <select>

    <option> One </option>

    <option> New </option>

    <option> Two </option>

 </select>
2
YSuraj 14 ene. 2017 a las 09:37

3 respuestas

La mejor respuesta

Prueba esto:

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

insertBefore agregará el elemento antes del selector indicado. En este caso, elegimos el segundo hijo option de nuestra selección. Recuerde que nth-child no es un índice basado en cero.

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

1
Hanlet Escaño 14 ene. 2017 a las 06:41

Utilice eq(index)

$('<option />').text('New').insertAfter('select option:eq(0)');
1
Alexandr Malyita 14 ene. 2017 a las 06:49

En jQuery, puede usar la función insertAfter.

Documentación:

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

Ejemplo de HTML:

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

Ejemplo de jQuery:

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

jsFiddle:

https://jsfiddle.net/fx7xxhvq/

Si no desea poner una identificación en el elemento que desea insertar después, cualquier selector válido funcionará, como el selector enésimo hijo mencionado en la otra respuesta.

0
hashtable 14 ene. 2017 a las 06:48