将 UL 转换为 SELECT - 抓取'data-attr'不起作用

Question

所以我正在开发市场选择器的移动版本。单击某个大洲将显示可用的国家/地区，然后单击某个国家/地区将显示可用的语言。

单击一种语言应该会根据 li 中的原始data-val"http://linkhere.com"更改按钮的href - 但由于某种原因，这并没有通过。

我正在尝试根据它还是 li 时的原始data-val来设置option的value，但它不起作用，正如您从我的 jsfiddle 中看到的那样：http://jsfiddle.net/2GM8v/

如何提取原始数据价值属性？ 我所拥有的不起作用（jsfiddle 中的第 68 行）。

编辑：我也尝试过data（'val'） - 这也不能通过它。

抱歉，我的代码太乱了，我还在学习。

示例代码如下：

$('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

jsfiddle 中的el是锚元素，data 属性设置为列表项。

若要读取列表项的值，请在给定锚点时执行以下操作：

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