jQuery $ .attr（）問題與選擇（下拉菜單）

Question

似乎很簡單，但它只是不工作。

我試圖從動態生成的<option> s中獲取一些自定義數據屬性。

選項正確生成和它們的語法是正確的：

<option value="xml/airports/africa.xml" data-pos="5" data-airport="Noumérat - Moufdi Zakaria Airport">Noumérat - Moufdi Zakaria Airport</option> 

然而，當我試圖安慰記錄這些值，我不斷收到undefined。

的腳本是看似簡單的和短期：

$(document).ready(function() { 
    var sel = $('select'); //its the only select on the page 
sel.change(function() { 
      //some variations I have tried: 
      var n = sel.attr('data-airport'); 
      var f = sel.val());   //****this is pulling fine 
      var i = sel.attr('data-pos'); 
      console.log(n, i); 
      console.log(sel.attr('data-pos'); 
      console.log($(this).attr('data-pos'); 
      console.log($('select').attr('data-pos'); 
}) 
}) 

我已經做了強制性的谷歌搜索無果...偉大的想法嗎？

Answer 1

將屬性分配給option元素而不是select元素。在你的情況下，你試圖從select元素sel中獲取屬性值。

相反，您需要從select元素中找到選定的選項。

應該

var opt = sel.find('option:selected') 

var i = opt.attr('data-pos'); 
console.log(opt.data('pos'); 
console.log(opt.attr('data-pos');