Me gustaría agregar un valor de datos a una etiqueta de opción en un elemento de selección. Por ejemplo data-price pero mi problema es que tengo varias etiquetas de selección. Entonces, ¿cómo obtengo JavaScript para tomar el valor de datos de esa opción que selecciona el usuario?

Cómo quiero que funcione:
El elemento seleccionado n. ° 1 contiene:

<select onchange="updatePrice()">
<option data-price="1">Apple $1</option>
<option data-price="2">Potato $2</option>
<option data-price="3">Bag of Grapes $3</option>
</select>

Seleccionar elemento # 2 contiene:

<select onchange="updatePrice()">
<option data-price="5">Really good cake</option>
<option data-price="15">Super Good Cake</option>
</select>

Entonces, honestamente, no estoy seguro de qué hacer en el JS ... Pero quiero que tome lo que el usuario seleccionó, obtenga data-price y luego calcule el total (simplemente agregando select1 + select2).

EDITAR : Mi respuesta es diferente a esta pregunta porque mi pregunta es más específica y requiere diferentes métodos. Aunque esto es específico, podría ayudar a un desarrollador en el futuro con las respuestas que obtenga. Por lo tanto, no es un duplicado sino una pregunta más específica que la otra. Aunque esa pregunta tiene una respuesta más simple que podría conectarse si el desarrollador sabe cómo hacerlo.

2
Kenneth Rhodes 4 mar. 2018 a las 05:00

3 respuestas

La mejor respuesta

Esto es un poco complicado. Debe proporcionar un identificador para que nuestro código no se confunda.

<select id="goods1" onchange="updatePrice(this)">
    <option data-price="0">Select one</option>
    <option data-price="1">Apple $1</option>
    <option data-price="2">Potato $2</option>
    <option data-price="3">Bag of Grapes $3</option>
</select>

<select id="goods2" onchange="updatePrice(this)">
    <option data-price="0">Select one</option>
    <option data-price="5">Really good cake</option>
    <option data-price="15">Super Good Cake</option>
</select>

Primero, agregue una variable global para almacenar el precio actual. Segundo, almacene el identificador y el valor del precio. Finalmente, manipula el precio actual.

<script>
  let price = 0;
  let stored = {};

  const updatePrice = elm => {
    const id = elm.id;
    const selectedPrice = parseInt(
      Array.from(
        elm.children
      ).filter(x => x.selected)[0].dataset.price
    );

    price = 0;
    stored[id] = selectedPrice;

    Object.keys(stored).forEach(key => price += stored[key]);

    console.log(`Price: ${price}`);
  };
</script>
0
wisn 4 mar. 2018 a las 02:29

Aquí hay un código que coincide con su descripción. Algunas notas: use el atributo value para obtener acceso directo al valor de la opción desde el elemento select. El operador unario (+) convierte los dos valores de cadenas en números operables. El tercer div es solo para mostrar el valor total de salida.

function updatePrice(){
    var s1 = document.getElementById("option1");
    var s2 = document.getElementById("option2");
    var total = +s1.value + +s2.value; 
    document.getElementById("price").innerHTML = "Total: $" + total

    // to get the text within the selected option
    var h1 = s1.options[s1.selectedIndex].text;

    return total;
}
<select id="option1" onchange="updatePrice()">
    <option value="1">Apple $1</option>
    <option value="2">Potato $2</option>
    <option value="3">Bag of Grapes $3</option>
</select>

<select id="option2" onchange="updatePrice()">
    <option value="5">Really good cake</option>
    <option value="15">Super Good Cake</option>
</select>

<div id="price"></div>

Avísame si necesitas más explicaciones. Salud.

2
Keegan Teetaert 4 mar. 2018 a las 20:18

Agregue una clase única a todos los cuadros de selección cuyo valor debe participar en el cálculo total, como mul_ck

//when even a single selectbox change it will trigger re-calculation
$('.mul_ck').change(function(){
    var total = 0;
    //grab all _mul_ck_ and loop over them
    $('.mul_ck').each(function(){
        var selectValue = $(this).find(":selected").attr('data-price');
        total += parseFloat(selectValue);
    });
    alert(total);
});
-1
Viney 4 mar. 2018 a las 02:30