jquery - jQuery：選択したデータリスト（html5）オプションから特定のデータ属性の値を取得するにはどうすればよいですか？

Question

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'));
});

jsbinへのリンク

クエリ：

「#button」または任意のイベントをクリックして、選択したデータリストオプションから「data-xyz」の値にアクセスする必要があります。

jQueryバージョン：1.7.2

ありがとう。

Answer 1

datalistオートコンプリート用の単なるストレージです。ページ内の複数の要素に使用できるため、選択されたプロパティはありません。

次のような適切なオプションを自分で見つける必要があります

$("#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)

})

デモ：http：//jsfiddle.net/shcRJ/