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.
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!
