jQuery: Comment obtenir la valeur d'un attribut de données à partir de la sélection datalist (html5) option?

html:

<input list="items" id="item">

<datalist id="items">
  <option value="A item"  data-xyz = "1" >
  <option value="aa item" data-xyz = "2" >
  <option value="C item"  data-xyz = "3" >
  <option value="D item"  data-xyz = "4" >
  <option value="E item"  data-xyz = "5" >
</datalist> 

<input type="button" id="button" value="Get xyz" />

js:

$("#button").click(function(){
       alert($("#items option:selected").attr('data-xyz'));
});

lien vers jsbin

Requête:

J'ai juste besoin d'accéder à la valeur de données-xyz' à partir de la sélection datalist
option de cliquer sur "#bouton" ou tout autre événement.

jQuery version: 1.7.2

Grâce.

Pourquoi utilisez-vous attr() au lieu de data()?
fera qui fera toute la différence ?

OriginalL'auteur Priyank Kapasi | 2012-11-10

  1. 8

    datalist est tout simplement un espace de stockage pour la saisie semi-automatique. Depuis, il pourrait être utilisé pour de multiples elemnts dans la page, elle sera pas une propriété sélectionnée.

    Vous aurez besoin pour localiser l'option applicable à vous, telles que les suivantes

    $("#button").click(function() {
    var val = $('#item').val()
    var xyz = $('#items option').filter(function() {
        return this.value == val;
    }).data('xyz');
    /* if value doesn't match an option, xyz will be undefined*/
    var msg = xyz ? 'xyz=' + xyz : 'No Match';
    alert(msg)

})

    DÉMO: http://jsfiddle.net/shcRJ/

    oui vous avez raison.. merci pour la solution..!

    OriginalL'auteur charlietfl