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

Question

因此，我正在开发市场选择器的移动版本。 单击一个大洲显示可用的国家，然后单击一个国家显示可用的语言。

单击一种语言，然后应根据href中的原始data-val"http://linkhere.com"更改按钮的href 。 -但这由于某种原因未能解决。

我试图根据它仍然是li时的原始data-val value来设置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是anchor元素，并且data属性设置为列表项。

要读取列表项的值，请在给出锚点的情况下执行以下操作：

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