Question

我有一个函数可以通过生成一个带有锚点，列表和隐藏字段的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或类。

我猜我需要传递一个select id或class name这个函数，以便它可以对每个下拉列表做些什么？

Answer 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();
});

Answer 2

你可以把它变成一个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()的第二个参数设置了上下文，因此不需要额外使用find。这是通过视觉解析的很多代码 - 但是jsfiddle可能有所帮助。

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

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

选择下拉样式函数jquery

2 个答案: