JavaScript: agregue un atributo adicional después de la nueva Opción()

Question

Tengo un fragmento de código que agrega dinámicamente opciones a un campo de selección dependiendo de algunos otros criterios. Se parece a esto:

if (chosen == "a_value") { 
    selbox.options[selbox.options.length] = new Option('text_1','value_1'); 
    selbox.options[selbox.options.length] = new Option('text_2','value_2'); 
    selbox.options[selbox.options.length] = new Option('text_3','value_3'); 
} 

Lo que necesito es agregar un atributo adicional a esa nueva opción que contiene un valor específico. En este caso, el atributo se llamará "descuento" y el valor será un número entero. Más tarde leeré los valores de los atributos y los procesaré en función del valor en el campo Opción.

Así que una opción se verá así, una vez que el script esté listo;

<option value="value_1" discount="integer">text_1</option> 

¿Tiene sentido?

Ahora, ¿cómo puedo hacer esto sin el uso de marcos JS. Es solo esta pequeña parte del código lo que necesito, por lo que un marco sería excesivo para este proyecto.

¡Salud! :-)

Answer 1

se puede hacer algo como

 

var o1 = new Option("key","value"); 
selbox.options[selbox.options.length] = o1; 
o1.setAttribute("key","value"); 
 

Answer 2

Esto se puede combinar en una sola línea de código:

(selbox.options[selbox.options.length] = new Option("key","value")).setAttribute("key","value"); 

Tenga en cuenta que esto sólo funcionará si tiene un solo atributo para añadir de lo contrario, necesitará una variable temporal.

Answer 3

Sé que esto es viejo, pero me encontré con esta pregunta cuando olvidé que es add y no push en la actualidad.

La forma correcta es usar select.options.add.

var opt = document.createElement('option'); 
opt.value = 'hello'; 
opt.text = 'world'; 
opt.setAttribute('data-discount', 'integer'); 
selbox.options.add(opt);