1

我有一个函数，通过生成带有锚点、列表和隐藏字段的 div 来设置选择输入的样式：

function selectMenu() {

    var selectMenu = $("#cf-budget");

    $('<input id="' + selectMenu.attr("id") + '-hidden" type="hidden" name="' + selectMenu.attr("name") + '" value="" />').insertAfter(selectMenu);

    selectMenu.hide();
    var selectTitle =  selectMenu.children("option:eq(0)").text();
    var newSelectMenu = '<div class="selectmenu"><div class="selectmenu-selected"><a rel="placeholder">'+ selectTitle +'</a></div><ul class="selectmenu-menu"><li><a rel="placeholder">'+ selectTitle +'</a></li>';
    selectMenu.find("option:not(:eq(0))").each(function () {
        newSelectMenu += '<li><a rel="' + $(this).val() + '">' + $(this).text() + "</a></li>";
    });
    newSelectMenu += "</ul></div>";
    $(newSelectMenu).insertAfter(selectMenu);
    var newSelectMenu = $("div.selectmenu");

    $("div.selectmenu-selected a", newSelectMenu).live("click", function () {
        $("ul.selectmenu-menu", newSelectMenu).toggle();
        return false;
    });
    $("body").live("click", function () {
        $("ul.selectmenu-menu", newSelectMenu).hide();
    });
    $("ul.selectmenu-menu a", newSelectMenu).live("click", function () {
        var optionValue = $(this).attr("rel");
        var optionText = $(this).text();
        $("ul.selectmenu-menu", newSelectMenu).hide();
        $("div.selectmenu-selected a", newSelectMenu).text(optionText);
        $("#" + selectMenu.attr("id") + "-hidden").val(optionValue);
        var activeMessageType = $("ul.message-type.active");
        if (activeMessageType.length) {
            activeMessageType.slideUp(300, function () {
                $("#" + optionValue).addClass("active").slideDown(300);
            }).removeClass("active");
        } else {
            $("#" + optionValue).addClass("active").slideDown(300);
        }
        return false;
    });
}

$(document).ready(function() {
  selectMenu();
});

我的问题是如何调整它以使其适用于“x”数量的选择输入？目前它只需要单个选择的 Id 或类。

我猜我需要向函数传递一个选择 id 或类名，以便它可以对每个下拉列表执行此操作？

4

2 回答 2

1

为此，我在这里制作了一个 jsFiddle，现在可以正常工作了：http: //jsfiddle.net/7TaqN/1/

ach 的建议是完美的，但是您的代码主体存在问题。必须进行以下更改才能使其正常工作：

此行必须删除，因为它覆盖了“this”选择器：

 var selectMenu = $("#cf-budget");

必须修改此行以选择具有单击元素 ID 的类，以防止所有元素受到影响：

 $(newSelectMenu).insertAfter(selectMenu);
 var newSelectMenu = $("div.selectmenu#"+ selectMenu.attr("id"));

这是作为 jQuery 模块的完整工作代码：

（请注意，这仅适用于 jQuery 1.8，因为您使用的 .live() 方法在 1.9 中已弃用

$.fn.selectMenu = function () {
    return this.each(function () {
        var selectMenu = $(this);
        //Body of your selectMenu() function goes here
        //All selectors should be in the context of the selectMenu element
        $('<input id="' + selectMenu.attr("id") + '-hidden" type="hidden" name="' + selectMenu.attr("name") + '" value="" />').insertAfter(selectMenu);

        selectMenu.hide();
        var selectTitle = selectMenu.children("option:eq(0)").text();
        var newSelectMenu = '<div id="' + selectMenu.attr("id") + '" class="selectmenu"><div id="' + selectMenu.attr("id") + '" class="selectmenu-selected"><a rel="placeholder">' + selectTitle + '</a></div><ul class="selectmenu-menu"><li><a rel="placeholder">' + selectTitle + '</a></li>';
        selectMenu.find("option:not(:eq(0))").each(function () {
            newSelectMenu += '<li><a rel="' + $(this).val() + '">' + $(this).text() + "</a></li>";
        });
        newSelectMenu += "</ul></div>";
        $(newSelectMenu).insertAfter(selectMenu);
        var newSelectMenu = $("div.selectmenu#"+ selectMenu.attr("id"));

        $("div.selectmenu-selected a", newSelectMenu).live("click", function () {
            $("ul.selectmenu-menu", newSelectMenu).toggle();
            return false;
        });
        $("body").live("click", function () {
            $("ul.selectmenu-menu", newSelectMenu).hide();
        });
        $("ul.selectmenu-menu a", newSelectMenu).live("click", function () {
            var optionValue = $(this).attr("rel");
            var optionText = $(this).text();
            $("ul.selectmenu-menu", newSelectMenu).hide();
            $("div.selectmenu-selected a", newSelectMenu).text(optionText);
            $("#" + selectMenu.attr("id") + "-hidden").val(optionValue);
            var activeMessageType = $("ul.message-type.active");
            if (activeMessageType.length) {
                activeMessageType.slideUp(300, function () {
                    $("#" + optionValue).addClass("active").slideDown(300);
                }).removeClass("active");
            } else {
                $("#" + optionValue).addClass("active").slideDown(300);
            }
            return false;
        });
    });
};

$(document).ready(function () {
    $('.mySelectClass').selectMenu();
});
于 2013-09-06T16:26:40.793 回答
0

你可以把它做成一个 jQuery 插件：

$.fn.selectMenu = function() {
    return this.each(function() {
        var selectMenu = $(this);
        //Body of your selectMenu() function goes here
        //All selectors should be in the context of the selectMenu element
    });
};

然后将它与标准 jQuery 选择器一起使用，如下所示：

$('.mySelectClass').selectMenu();

编辑：看起来您已经使用第二个参数设置了上下文，因此不需要jQuery()额外使用 of 。find不过，有很多代码需要通过视觉解析——jsfiddle 可能会有所帮助。

您还需要替换一些选择器，以便对元素的子selectMenu元素进行评估，例如：

selectMenu.find("div.selectmenu-selected a", newSelectMenu).live("click", function () {

于 2013-09-05T16:59:39.547 回答