Iterar Combo Jquery

Hola de nuevo, lo que haremos hoy será aprender a iterar un elemento <select> con la ayuda de jQuery. Esto con el objetivo de manipular la lista de opciones, para agregar elementos, eliminarlos, obtener el valor o el texto de cada <option> asi como modificar dichos valores. Para realizar esta acción nos apoyaremos en el metodo each() que jQuery nos proporciona.

Listar las opciones de nuestro select

Lo primero que veremos será cómo obtener e imprimir en consola todos los elementos de nuestro combo, imprimiendo el texto y el valor que representa cada option. Declaramos nuestro Combo y agregamos algunas opciones:

<select id="comboTest">
    <option value="1">Valor1</option>
    <option value="2">Valor2</option>
    <option value="3">Valor3</option>
</select>

Una vez declarado nuestro select vamos a proceder a crear el código javascript que nos permita iteralo.

$('#comboTest > option').each(function(){
  //aquí hacer lo que sea con cada elemento en la iteración.
  console.log("-"+$(this).text()+": "+$(this).val());
});

El resultado que obtentremos será algo como esto:

-Valor1: 1
-Valor2: 2
-Valor3: 3

Veamos cada parte del código anterior:

$('#comboTest >option') hace referencia a un elemento option dentro de nuestro select.

.each() es un metodo de jQuery que nos permite saber cuantas veces se cumple la referencia que hicimos con $('#comboTest > input') ; es decir que repetirá una acción las veces que encuentre un option dentro de nuestro select, en nuestro caso lo hará tres veces.

El metodo .each() recibe como parámetro una función que ejecutará el mismo numero de veces que las iteraciones que realice el método. en esta caso la función que le pasamos como argumento fue la siguiente:

function(){
  //aquí hacer lo que sea con cada elemento en la iteración.
  console.log("-"+$(this).text()+": "+$(this).val());
}

Como se puede observar dentro de la function utilizamos $(this) que dentro del metodo each() hace referencia al objeto que se está iterando en ese momento. algo como esto:

Nota: cuando pongo que el objeto de $(this) es <option value="3">Valor3</option> me refiero a que apunta a ese objeto dentro del DOM, no a que su valor sea una cadena de texto con ese valor.

Una vez que sabemos eso, podemos explicar $(this).text() y $(this).val()

$(this).val(): Nos permite acceder o asignar un valor al elemento, modificando el atributo value="" en este caso del option. $(this).text(): Nos permite acceder o asignar un valor al texto del elemento en caso de que este tenga el atributo. Por ejemplo en la etiqueta <option> El texto es el que se encuentra entre la etiqueta que abre y la que cierra.

Modificar los elementos

Lo que haremos a continuación será modificar el texto de uno solo de los elementos de nuestro select, y para ejemplo vamos a modificar el elemento que tenga por nombre “Valor2”.

Vamos a utilizar una función igual a la anterior pero con una pequeña modifcación; veamos:

$('#comboTest > option').each(function(){
  /*
  * Aquí vamos a preguntar si el elemento cumple con
  * la condición que buscamos
  */
  if($(this).text() == "Valor2"){
    $(this).text("Valor Modificado");
  }
});

Puedes ver el ejemplo funcionando Aquí

Espero que sea de ayuda para ti esta pequeña explicación.