Question

0

147

Views

Configuración de múltiples valores para la opción usando javascript (agregar)

 <!DOCTYPE html> <html> <body> <select id='selectid' onchange="selectchange()"> </select> <script> for (let i=0;i<10;i++) { var select = document.getElementById("selectid"); var option = document.createElement("option"); option.text = "text="+i; option.value = i; select.add(option); } function selectchange() { alert(document.getElementById("selectid").value); } </script> </body> </html>

Descripción

Aquí he estado usando javascript para agregar opciones para mi etiqueta de selección

Lo necesitaba

Necesito almacenar más de un dato usando mi código javascript existente como para la opción value=1 necesito agregar otro valor para la etiqueta de opción como value2=a, y para value=2 como value2=b

Ejemplo de sintaxis

 var select = document.getElementById("selectid"); var option = document.createElement("option"); option.text = "text="+i; option.value = i; option.value2 = a; select.add(option);

Necesito agregar dos valores para mi opción usando la sintaxis anterior.

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

La primera solución es usar atributos de datos :

 <!DOCTYPE html> <html> <body> <select id='selectid' onchange="selectchange()"> </select> <script> for (let i = 0; i < 10; i++) { var select = document.getElementById("selectid"); var option = document.createElement("option"); option.text = "text=" + i; option.value = i; option.dataset['var-1'] = i; option.dataset['var-2'] = 'value2'; option.dataset['var-3'] = 'value3'; // and etc. select.add(option); } function selectchange() { const selectedOption = document.getElementById("selectid").selectedOptions[0] console.log(selectedOption.dataset); } </script> </body> </html>

La segunda solución es usar una variable externa para almacenar datos adicionales:

 <!DOCTYPE html> <html> <body> <select id='selectid' onchange="selectchange()"> </select> <script> const dataStore = {}; for (let i = 0; i < 10; i++) { var select = document.getElementById("selectid"); var option = document.createElement("option"); option.text = "text=" + i; option.value = i; select.add(option); dataStore[i] = { var1: i, var2: 'var2', var3: 'var3' }; } function selectchange() { const index = document.getElementById("selectid").value const value = dataStore[index] console.log(value); } </script> </body> </html>

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-06T18:00:28.280Z

Puede intentar usar setAttribute y getAttribute .

 <!DOCTYPE html> <html> <body> <select id='selectid' onchange="selectchange()"> </select> <script> for (let i=0;i<10;i++) { var select = document.getElementById("selectid"); var option = document.createElement("option"); option.text = "text="+i; option.value = i; option.setAttribute("data", Math.random()); option.setAttribute("data1", `data1_${Math.random()}`); select.add(option); } function selectchange() { const select = document.getElementById("selectid"); const data = select.options[select.selectedIndex].getAttribute("data"); const data1 = select.options[select.selectedIndex].getAttribute("data1"); console.log(`value is: ${select.value} and data is: ${ data } data1 is: ${data1}`); } </script> </body> </html>

Espero que esto sea lo que estabas buscando!!

0

147