Saturday, 28 September 2013

jQuery $.attr() issue with select (drop-downs)

jQuery $.attr() issue with select (drop-downs)

Seems simple enough, but it just isn't working.
I'm trying to grab a handful of custom data attributes from dynamically
generated <option>s.
The options are generating correctly and their syntax is correct:
<option value="xml/airports/africa.xml" data-pos="5"
data-airport="Noumérat - Moufdi Zakaria Airport">Noumérat - Moufdi Zakaria
Airport</option>
However when I try to console log these values, I keep getting undefined.
The script for it is seemingly simple and short:
$(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');
})
})
I've done the obligatory google search to no avail...great ideas anyone?

No comments:

Post a Comment