Añadir un nuevo elemento a un Select con JQuery

Cuando trabajamos con JQuery las cosas se pueden realizar de muchas formas, el añadir elementos a un objeto es de lo más sencillo, por lo que añadir opciones a un select de html sigue siendo igual de simple.

jquery
Añadir opciones a Select con JQuery

Como decía, hay múltiples formas de añadir código a nuestras etiquetas de html, pero la que me resulta más sencilla es utilizar la función append que lo que hace es añadir al final del interior de la etiqueta el código que queramos, es decir, si tengo:

 

<select id=»miMenuDesplegable»></select>

Y lo que queremos es añadir un par de opciones más, podremos hacer:

$(‘#miMenuDesplegable’).append(‘<option value=»op1″ selected=»selected»>Código de ejemplo Append 1</option>’);

$(‘#miMenuDesplegable’).append(‘<option value=»op2″>Código de ejemplo Append 2</option>’);

De esta manera estamos añadiendo dos opciones al menú desplegable o combobox, la primera opción con el texto visible de «Código de ejemplo Append 1″ tiene el valor de selección  op1, además le estamos diciendo que está seleccionado con el atributo selected=»selected»

Por otro lado, también hemos añadido otra segunda opción «Código de ejemplo Append 2» con valor de selección «op2».

De esta manera podremos añadir tantas opciones como queramos. Si quisiéramos modificarlo en tiempo de ejecución, podríamos añadirle un id a cada select para que pudiéramos seleccionarlo con JQuery de la misma manera.

$(‘#miMenuDesplegable’).append(‘<option id=»opcion1″ value=»op1″ selected=»selected»>Código de ejemplo Append 1</option>’);

En este caso podríamos acceder al option del select:

$(‘#opcion1’).val(«ejemplo1»);

De todas maneras esto lo dejo para aclararlo más adelante. Espero que os sirva! Si es así agradezco que comentéis, preguntéis y sobre todo que compartáis!

 

Carlos Dk

Apasionado por la enseñanza y el SEO

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.