javascript - 自定义 css 选择框的几个问题 -

Question

我需要你的帮助，

我有一个正在创建的自定义 css 选择框，但是出现了 2 个新问题。

1. 在任一选择下拉框中进行选择时，两个选择框自动具有相同的值:

这里是一个快速捕获:

1. 单击下拉框时，现在会出现 2 个黄色框相互堆叠，而不是它们的正确框:

这里是一个快速捕获:

这是一个 fiddle :https://jsfiddle.net/j7fLj3g5/

有问题的代码:

function test() {

    var list = $(".select dd ul li a.selected")

    if (list.length > 1) {
        var sub_array = [];
        $.each(list, function() {
            sub_array.push($(this).data('val'))
        })

        $('.select dt a span').data('val',sub_array)
    }
    else {
        $(".select dt a span").data('val',$(".select dd ul li a.selected").data('val') )

    }

        alert($('.select dt a span').data('val') )
        //alert($('.select dt a span').html() )

}



        $(document).ready(function() {

            $(".select dt a").click(function() {
                $(".select dd ul").toggle();

                $(this).css("background-color", "rgb(255,255,196)");

                //$(.select dt a span).css("background-color", "#FFF");

            });

            $(".select dd ul li a").click(function(e) {
                var text = $(this).html();

                if (e.ctrlKey) {

                    $(this).addClass('selected');

                    $(".select dt a span").html("("+ $(".select dd ul li a.selected").length+")")

                }
                else {
                    var text = $(this).html();
                    $(".select dd ul li a").removeClass('selected');
                    $(this).addClass('selected');

                    $(".select dt a span").html(text);

                    $(".select dt a").css("background-color", "");

                    $(".select dd ul").hide();
                }
                test()

            });

            function getSelectedValue(id) {
                return $("#" + id).find("dt a span.value").html();
            }

            $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("select"))
                    $(".select dd ul").hide();
            });



    $(".select dd ul").focusout(function() {

        $(this).css("background-color", "");

    });

Answer 1

我已更正您的 jQuery 代码以使其正常运行。但我完全反对使用这种方法在您的网站上使用自定义选择框。您应该考虑构建一个 jQuery 插件，如 https://learn.jquery.com/plugins/basic-plugin-creation/ 所示。或者使用一个已经存在的插件，比如 select2。这样您的代码将可重用且易于维护。

function test(select) {

    var list = select.find("a.selected");

    if (list.length > 1) {
        var sub_array = [];
        $.each(list, function() {
            sub_array.push($(this).data('val'))
        })

        select.find("dt a span").data('val', sub_array)
    } else {
        select.find("dt a span").data('val', select.find("dd a.selected").data('val'))

    }

    alert(select.find("dt a span").data('val'))
        //alert($('.select dt a span').html() )

}



$(document).ready(function() {

    $(".select dt a").click(function() {
        var select = $(this).closest('.select');
        select.find('ul').toggle();

        $(this).css("background-color", "rgb(255,255,196)");

        //$(.select dt a span).css("background-color", "#FFF");

    });

    $(".select dd ul li a").click(function(e) {
        var text = $(this).html();
        var select = $(this).closest('.select');

        if (e.ctrlKey) {

            $(this).addClass('selected');

            select.find('dt span').html("(" + select.find('a.selected').length + ")")

        } else {
            var text = $(this).html();
            select.find("dd a").removeClass('selected');
            $(this).addClass('selected');

            select.find("dt span").html(text);

            select.find("dt a").css("background-color", "");

            select.find("dd ul").hide();
        }
        test(select)

    });

    function getSelectedValue(id) {
        return $("#" + id).find("dt a span.value").html();
    }

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (!$clicked.parents().hasClass("select"))
            $(".select dd ul").hide();
    });



    $(".select dd ul").focusout(function() {

        $(this).css("background-color", "");

    });
});