Converting UL to SELECT - grabbing 'data-attr' not working

Question

So I'm working on a mobile version of a market selector. Clicking on a continent shows available countries and then clicking on a country shows available languages.

Clicking on a language should then change the href of the button based on the original data-val"http://linkhere.com" that was in the li. - but this for some reason isn't pulling through.

I'm trying to set the value of the option according to what its' original data-val was when it was still an li, but it's not working as you can see from my jsfiddle: http://jsfiddle.net/2GM8v/

How do I pull in that original data-val attr? what I have isn't working (line 68 in the jsfiddle).

EDIT: I've also tried data('val') - and this doesn't pull it through either.

Sorry that my code is such a mess, I'm still learning.

sample code here:

$('section ul', this.$element).hide();

// Create the dropdown base
$("<select />").appendTo(".continents", this.$element);

// Create default option "Go to..."
$("<option />", {
    "selected": "selected",
        "value": "",
        "text": $('.continents span.selected', this.$element).text()
}).appendTo(".continents select", this.$element);

// Populate dropdown with menu items
$(".continents li a", this.$element).each(function () {
    var el = $(this);
    $("<option />", {
        "value": el.attr("href"),
            "text": el.text()
    }).appendTo(".continents select", this.$element);
});


$(".continents select", this.$element).change(function () {

    //get the value of the selected item
    var selectVal = $(this).find("option:selected").val();

    //when the select changes, do this

    $("<select />").appendTo('.countries', this.$element);

    // Create default option "Go to..."
    $("<option />", {
        "selected": "selected",
            "value": "",
            "text": $('.countries span.selected', this.$element).text()
    }).appendTo(".countries select", this.$element);

    // Populate dropdown with menu items
    $(selectVal + " li a", this.$element).each(function () {
        var el = $(this);
        $("<option />", {
            "value": el.attr("href"),
                "text": el.text()
        }).appendTo(".countries select", this.$element);
    });

    $(".countries select", this.$element).change(function () {

        //get the value of the selected item
        var selectVal = $(this).find("option:selected").val();

        //when the select changes, do this

        $("<select />").appendTo('.languages', this.$element);

        // Create default option "Go to..."
        $("<option />", {
            "selected": "selected",
                "value": "",
                "text": $('.languages span.selected', this.$element).text()
        }).appendTo(".languages select", this.$element);

        // Populate dropdown with menu items
        $(selectVal + " li a").each(function () {
            var el = $(this);
            $("<option />", {
                "value": el.attr('data-val'),
                    "text": el.text()
            }).appendTo(".languages select", this.$element);
        });

        $(".languages select", this.$element).change(function () {
            var selectVal = $(this).find("option:selected").val();
            $('#continue', this.$element).removeClass('disabled');
            $('#continue', this.$element).attr('href', selectVal);
        });


    });



});

Answer 1

Your el in jsfiddle is the anchor element, and the data attribute is set to the list item.

To read the value of the list item, when anchor is given, do this:

var value = el.closest('li').data('val');