[HTML][JS] Optimizar codigo: asignar value a <option> a partir de innerText

[.:Xx4NG3LxX:.]

Saludos,

HTML:

Código (html) [Seleccionar] Expandir

<select id="country">
  <option id="empty" value="" selected>--- País ---</option>
  <option value="">Venezuela</option>
  <option value="">Argentina</option>
</select>

javascript:

Código (javascript) [Seleccionar] Expandir

document.addEventListener('DOMContentLoaded', () => {
  // Colocar el valor correspondiente a cada opción del selector de países.
  var options = document.getElementsByTagName("option"); // Obtengo todos los elementos "option".
  for (var i = 0; i < options.length; i++) {  // Bucle para hacer referencia a cada elemento individualmente.
    options[i].value = options[i].innerText;  // Se traduce a: El valor de cada opción (options[i].value), será igual al texto que lleve dentro (options[i].innerText).
  }
  document.getElementById("empty").value = "";  // Exeptuamos la opción por defecto.
});

¿Está bien?
¿Hay otra forma más fácil?

Gracias por sus comentarios...

[Drakaris]

La logíca de este código lo veo bién. Obtienes todas las etiquetas options y con ello haces un bucle, pasando por cada etiqueta y añades al atributo value el texto del option. Y el id empty añades un valor vacio.

Para mí que no hay otra forma.

[.:Xx4NG3LxX:.]

Muchas gracias! Alguien más?

La verdad yo también lo veo bien...

[@XSStringManolo]

En realidad si que puedes optimizarlo. En este caso da un poco igual, pero en otros es mejor que crees las etiquetas de javascript.

El motivo es que estás actualizando el documento 3 veces. En caso de que el documento necesitase renderizar mucha historia lo mejor sería utilizar un documentFragment https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

Por otro lado, estás haciendo 2 operaciones innecesarias, actualizar el value del primer elemento y después eliminarlo.

Solución super sencilla, inicializa el iterador con 1 para no acceder al índice 0 del array. (Dando por echo que el por defecto va a ser el primer elemento del array). Tambien podrías hacer un splice al array para quitarle el primer elemento.

Código (javascript) [Seleccionar] Expandir

for (var i = 1; i < options.length; i++) {
    options[i].value = options[i].innerText
}

Así ya no necesitas. document.getElementById("empty").value = "";

Si añades el código de javascript justo antes de la etiqueta body, entonces también puedes prescindir totalmente del addEventListener.

Otra cosa que está bien saber es que por cada iteración se calcula la condición. Es decir, se está obteniendo el .length cada iteración. Sabes que el tamaño es constante asique podrías usar un valor fijo para evitar calcular el tamaño del string en cada iteración. En este caso concreto es hasta contraproductivo, pero lo comento porque se te puede dar el caso que metas una condición de bastante costo computacional que es mejor que precalcules y metas en una variable. Puedes usar el propio espacio destinado para la inicialización o asignación del bucle for clásico, así se elemina de memoria al concluir el bucle.

Ej:

Código (javascript) [Seleccionar] Expandir

for (var i = 1, s = options.length; i < s; ++i) { 
    options[i].value = options[i].innerText;
}

[EdePC]

Yo solo mencionaría que cuando un <option> no tiene un value definido explícitamente, su value pasa a ser su innerText, osea el código equivalente sería:

Código (html4strict) [Seleccionar] Expandir

<select id="country">
  <option value="" selected>--- País ---</option>
  <option>Venezuela</option>
  <option>Argentina</option>
</select>

- Claro que dependerá de ti el ser o no explícito.

[WHK]

Hola, yo creo que el código no pinta mal pero tambien lo veo como una mala práctica debido a que el valor debe interpretarse del lado del servidor para saber que opciones etsá guardando el usuario y ¿que sucede si quieres hacer que tu sitio web funcione en distintos idiomas?, tendrás valores en español, ingles, frances y quien sabe que otros lenguajes. Si guardas el texto en la base de datos entonces tendrás problemas para separar los tipos de contenido, hacer búsquedas, filtrar datos o mostrar valores cuando el usuario cambie de idioma, ya que los selectores pasarán a tener valores distintos según cada idioma.

Mejor te recomiendo utilizar valores estáticos para cada texto a mostrar de manera totalmente independiente y tener en cuenta que cuando el usuario vargue un formulario con valores guardados anteriormente tendrás que utilizar la propiedad "selected" para seleciconar el valor por defecto independientemente del idioma o texto que se esté utilizando.

Si el día de mañana quieres utilizar una app movil y quieres disponibilizar tu app con algún servicio REST tendrás que utilizar identificadores de valores y no el texto original ya que la app movil puede tener sus propios textos de traducciones independientes a la aplicación web o utilizar diferentes tipos de filtros y manejos de la información de manera interna.

De todas maneras, con jQuery puedes hacerlo masivamente:

Código [Seleccionar] Expandir

$('option').each(function(){ $(this).val($(this).text()) });

Saludos.

[.:Xx4NG3LxX:.]

Gracias a todos, cualquier comentario más se agradece. Modifique los códigos un poco, aplicando los cambios sugeridos por @XSStringManolo. Esta bien así? O aún falta optimizarlo?

HTML:

Código (html) [Seleccionar] Expandir

<select id="country">
  <option selected>--- País ---</option>
  <option value="">Venezuela</option>
  <option value="">Argentina</option>
</select>


javascript:

Código (javascript) [Seleccionar] Expandir

// Colocar el valor correspondiente a cada opción del selector de países.
var options = document.getElementsByTagName("option"); // Obtengo todos los elementos "option".
for (var i = 1, s = options.length; i < s; i++) {  // Bucle para hacer referencia a cada elemento individualmente, exceptuando al primero.
  options[i].value = options[i].innerText;  // Se traduce a: El valor de cada opción (options[i].value), será igual al texto que lleve dentro (options[i].innerText).
}


Muchas gracias a @EdePC y a @WHK, pero sólo es una prueba para mi propio aprendizaje... MUCHAS GRACIAS!!!

[#!drvy]

Estoy de acuerdo con WHK, estás condicionando tu aplicación al idioma del frontend.

Generalmente cuando tienes un desplegable de países, lo que se suele hacer es que el option tenga de texto el nombre del país y de value el código ISO 3166-1 del país ya sea en alpha2 o alpha3.

https://es.wikipedia.org/wiki/ISO_3166-1

Código (javascript) [Seleccionar] Expandir

<select id="country">
 <option selected>--- País ---</option>
 <option value="ve">Venezuela</option>
 <option value="ar">Argentina</option>
</select>

Por otro lado, con ese selector, vas a cambiar a TODOS los options de TODA la página. Igual en un futuro añades un select donde los options si tengan value diferente al innerText y la jodes. Recuerda que options es una coleción del select.

Código (javascript) [Seleccionar] Expandir

var options = document.getElementById("country").options;
for (var i = 0; i < options.length; ++i) {
   options[i].value = options[i].innerText;
}

Y por último, le has dado un ID "empty" al primer option. Recuerda que un ID solo se puede asignar una vez. En el próximo select tendrás que usar otra cosa que no sea empty como ID. Como alternativa puedes usar una clase o un data attribute (data-).

Saludos

[.:Xx4NG3LxX:.]

Muchas gracias por sus opiniones... Veré que hago... Something more?

[@XSStringManolo]

Muchas gracias por sus opiniones... Veré que hago... Something more?

Sigue dándole. Te recomiendo el libro Eloquent javascript y que te leas todo lo que hay en esta pregunta; respuestas, comentarios, links... Y lo entiendas: https://codegolf.stackexchange.com/questions/2682/tips-for-golfing-in-javascript . Te ayudará a conocer el funcionamiento del lenguaje, algún truquito y más cosas. Hay uno igual para ES6.