Me gustaría obtener el atributo "data-price" del elemento de opción onChange. obtener el valor funciona, pero no puedo obtener el atributo de precio de datos. Tengo el siguiente código, que no funciona.

function getComboA(selectObject) {
  var printit = selectObject.getAttribute("data-price");  
  console.log(printit);
}
/*with this it gets the value tho, but i need the data-price attribute
function getComboA(selectObject) {
  var printit = selectObject.value;  
  console.log(printit);
}

*/
<select id="comboA" onchange="getComboA(this)">
      <option  value="">Select combo</option>
      <option data-price=100 value="Value1">Text1</option>
      <option data-price=200 value="Value2">Text2</option>
      <option data-price=2003 value="Value3">Text3</option>
    </select>
-1
Daniel Jeney 15 jun. 2020 a las 17:42

3 respuestas

La mejor respuesta

Por JavaScript :

var selection = document.getElementById("comboA");
selection.onchange = function(event){
  var printit  = event.target.options[event.target.selectedIndex].dataset.price;
  console.log(printit);
};

O JQuery :

$('#comboA').change(function(){
      var printit =$(this).find(':selected').attr('data-price')
      console.log(printit);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="comboA" >
      <option  value="">Select combo</option>
      <option data-price=100 value="Value1">Text1</option>
      <option data-price=200 value="Value2">Text2</option>
      <option data-price=2003 value="Value3">Text3</option>
   </select>
1
Younes Zaidi 15 jun. 2020 a las 14:55

Puede usar el selectedIndex de selectObject para obtener el índice que puede usar para obtener la opción seleccionada y luego puede obtener el atributo data-price de esa opción. Código:

function getComboA(selectObject) {
  var selectedIndex = selectObject.selectedIndex;  
  var selectedPrice = selectObject[selectedIndex].getAttribute("data-price");
  console.log(selectedPrice);
}
0
skapicic 15 jun. 2020 a las 14:52

Esto debería hacer que funcione:

const comboA = document.querySelector('#comboA');
comboA.addEventListener('change', function(event) {
    console.log(event.target.options[event.target.selectedIndex].dataset.price);
});

Con esto también puede omitir la llamada a la función en html.

1
battaboombattabaam 15 jun. 2020 a las 14:51