0

Antes realice una pregunta con imágenes esta vez la realice con código

Espero me puedan ayudar con mi pregunta ya que no soy experto en el tema y se los agradecería mucho.

Quiero que un option de un select cuente con dos value, por ejemplo en el select 1 la opción 1 contenga un value que diga value1="1" (este ya lo ocupo para la función en JS) y poder poner otro value2="10". Esto para poder realizar una suma al final

la parte de JS ya esta resuelta, esta funciona que dependiendo lo que selecciona manda un texto y el segundo value lo ocuparía para extraer el valor y hacer una variable donde se acumule y al final mandar a sumar con la siguiente variable y en la parte del párrafo imprimir la variable resultante

<html lang="es">
    <head>
        <meta charset="utf-8">
 
        <script>
        function Select1(objeto)
        {
            var indice=objeto.selectedIndex;
 
            if(objeto.value==1||objeto.value==2)
            {

                var resultado="La opción 1 o 2 seleccionada es "+objeto.options[indice].text;
                document.getElementById("resultado1").innerHTML=resultado;
            }
            if(objeto.value==3)
            {
 
                var resultado="La opción 3 seleccionada es "+objeto.options[indice].text;
                document.getElementById("resultado1").innerHTML=resultado;
            }
            if(objeto.value==0){
 
                var resultado="NO A SELECCIONADO NADA";
                document.getElementById("resultado1").innerHTML=resultado;
            }
        }

        function Select2(objeto)
        {
            var indice=objeto.selectedIndex;
 
            if(objeto.value==1||objeto.value==2)
            {
 
                var resultado="La opcion 1 ó 2 es "+objeto.options[indice].text;
                document.getElementById("resultado2").innerHTML=resultado;
            }
            if(objeto.value==3)
            {
 
                var resultado="La opcion tres es "+objeto.options[indice].text;
                document.getElementById("resultado2").innerHTML=resultado;
            }
            if(objeto.value==0){
 
                var resultado="NO A SELECCIONADO NADA";
                document.getElementById("resultado2").innerHTML=resultado;
            }
        }


        </script>
    </head>
 
    <body>
        <form>
            <select name="miSelect1" id="miSelect1" onchange="Select1(this)">
                <option value="0">selecciona</option>
                <!-- este value tendria que tener el valor de 10-->
                <option value="1">Numero 1</option>
                <!-- este value tendria que tener el valor de 15-->
                <option value="2">Numero 2</option>
                <!-- este value tendria que tener el valor de 12-->
                <option value="3">Numero 3</option>
            </select>
 
        </form>

        <div id="resultado1">primero</div><br>

        <form>
            <select name="miSelect2" id="miSelect2" onchange="Select2(this) ">
                <option value="0">selecciona</option>
                <!-- este value tendria que tener el valor de 5-->
                <option value="1">Objeto1</option>
                <!-- este value tendria que tener el valor de 2-->
                <option value="2">Objeto2</option>
                <!-- este value tendria que tener el valor de 13-->
                <option value="3">Objeto3</option>
            </select>
 
        </form>

        <div id="resultado2">segundo</div>
        <p>La suma de los objetos escogidos es: </p> <!-- aquí pondria la suma de los dos select-->
    </body>
</html>
1
  • prueba con data, es decir a la option le pones un data con el segundo value ... <option data-value2='10' value='1'>Opcion 1 </option> Commented el 17 jun. 2020 a las 2:57

1 respuesta 1

1

prueba con data, es decir a la option le pones un data con el segundo value

... <option data-value2='10' value='1'>Opcion 1 </option>

Es decir así:

<form>
    <select name="miSelect1" id="miSelect1" onchange="Select1(this)">
        <option value="0" >selecciona</option>
        <!-- este value tendria que tener el valor de 10-->
        <option value="1" data-value2="10">Numero 1</option>
        <!-- este value tendria que tener el valor de 15-->
        <option value="2" data-value2="15">Numero 2</option>
        <!-- este value tendria que tener el valor de 12-->
        <option value="3" data-value2="12">Numero 3</option>
    </select>

</form>

<div id="resultado1">primero</div><br>

<form>
    <select name="miSelect2" id="miSelect2" onchange="Select2(this) ">
        <option value="0" >selecciona</option>
        <!-- este value tendria que tener el valor de 5-->
        <option value="1" data-value2="5">Objeto1</option>
        <!-- este value tendria que tener el valor de 2-->
        <option value="2" data-value2="2">Objeto2</option>
        <!-- este value tendria que tener el valor de 13-->
        <option value="3" data-value2="13">Objeto3</option>
    </select>

</form>

y en el JAVASCRIPT tomas como en la documentacion: https://stackoverflow.com/questions/38519791/how-to-get-data-attribute-of-option-tag-in-javascript/38519877 el valor del value2 así:

mySelect.selectedOptions[0].getAttribute("data-value2")
1
  • Gracias por tu ayuda, me sirvió de mucho Commented el 17 jun. 2020 a las 20:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.