¿Cómo obtener valor de atributo DATA (HTML5)?

[berkeleyPunk]

Hola!

La idea es esta: Tengo un select con varios options, cada uno con el atributo data, el cual debe ser leído con JS al seleccionar una opción de dicho select.

Código HTML:

<select onchange="x(this.dataset.fruta)">
   <option>:: Selecciona una fruta ::</option>
   <option value="01" data-fruta="fresa">Fresa  </option>
   <option value="02" data-fruta="naranja">Naranja </option>
   <option value="03" data-fruta="uva">Uva</option>
</select>
 

Código Javascript:

function x(dato)
{
  if (dato == "fresa")
  {
     alert("He logrado leer el atributo DATA!\n"+dato);
  }
  else
  {
     alert("ERROR");
  }
}
 

Esto no funciona.

Ahora, si en vez de poner this.dataset.fruta ponemos this.value, el alert sí nos muestra el valor respectivo del value. ¿Por qué con value sí, y con dataset no?


Saludos!