1

アンカー、リスト、および非表示フィールドを使用して div を生成することにより、select 入力をスタイル設定する関数があります。

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 モジュールとして完全に機能するコードです。

(使用している .live() メソッドは 1.9 で非推奨になっているため、これは jQuery 1.8 でのみ機能することに注意してください。

$.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 に答える