如何停止使用 Javascript 破坏多个选择框

Question

我使用 jquery 创建了自定义选择下拉菜单。当一个选择框出现时效果很好......但是当两个选择框出现在同一页面上时，一切都会崩溃，只有最后一个选择元素可以正常工作，但它。

适用于其中的代码：

$(document).ready(function(){

 var select = $('select.selectForm');

    var selectBoxContainer = $('<div>',{
       "class"     : 'selectContainer',
        html        : '<div class="selectBox"></div>'
    });

    var dropDown = $('<ul>',{
        "class"     : 'selectDropDown'
    });

    var selectBox = selectBoxContainer.find('.selectBox');


    //Loop though the options of the original select element
    select.find('option').each(function(i){
        var option = $(this);

        //sets default text to first option in the select
        if( i !== select.prop("selectedIndex") ){           
            selectBox.html( option.text() );
        }

        if( option.data('skip') ){
            return true;
        }

        //Creating a dropdown list from the items in out select element using the option text
        var li = $('<li>',{
            html : option.text()
        });

        li.on("click",function(){
            selectBox.html( option.text() );
            dropDown.trigger('hide'); //might be dropDown.trigger('hide');

            //also change the original select element
            select.val( option.val() );

            return false;
        });

        //add list item to the dropdown menu
        dropDown.append(li);

    });//end of select find

    //Adding dropdown to DOM
    selectBoxContainer.append(dropDown.hide()); //adding dropDown ul to DOM within the selectContainer div    
    select.hide().after(selectBoxContainer); //Hides original select element and inserts ul containder after it



    dropDown.bind('show',function(){
        if(dropDown.is(':animated')){
            return false;
        }
        selectBox.addClass('expanded');
        dropDown.slideDown();

    }).bind('hide',function(){

        if(dropDown.is(':animated')){
            return false;
        }

        selectBox.removeClass('expanded');
        dropDown.slideUp();

    }).bind('toggle',function(){

        if(selectBox.hasClass('expanded')){
            dropDown.trigger('hide');
        } else{
            dropDown.trigger('show');
        }
    });

    selectBox.on('click',function(){
        dropDown.trigger('toggle');
        return false;
    });

    $(document).on("click",function(){
        dropDown.trigger('hide');
    });


 });//document ready end

如何与一个人一起工作： http://jsfiddle.net/im_cr/TyPSX/

如何打破两个： http://jsfiddle.net/im_cr/TyPSX/5/

任何帮助表示赞赏。

Answer 1

我猜你正在寻找更像这样的东西：

$.fn.selectForm = function () {
    return this.each(function () {
        var selectBox = $('<div />', {
                'class': 'selectBox'
            }),
            selectBoxContainer = $('<div />', {
                "class": 'selectContainer'
            }),
            dropDown = $('<ul />', {
                "class": 'selectDropDown'
            });

        selectBoxContainer.append(selectBox);

        $(this).find('option').each(function (i, option) {
            //sets default text to first option in the select
            if (i !== $(this).prop("selectedIndex")) {
                selectBox.html($(option).text());
            }

            if ($(option).data('skip')) {
                return true;
            }

            //Creating a dropdown list from the items in out select element using the option text
            var li = $('<li>', {
                html: $(option).text(),
                on: {
                    click: function () {
                        selectBox.html($(option).text());
                        dropDown.trigger('hide'); //might be dropDown.trigger('hide');
                        select.val(option.value);
                        return false;
                    }
                }
            });
            dropDown.append(li);
        }); //end of select find

        selectBoxContainer.append(dropDown.hide());
        $(this).hide().after(selectBoxContainer);

        dropDown.bind('show', function () {
            if (dropDown.is(':animated')) {
                return false;
            }
            selectBox.addClass('expanded');
            dropDown.slideDown();
        }).bind('hide', function () {
            if (dropDown.is(':animated')) {
                return false;
            }
            selectBox.removeClass('expanded');
            dropDown.slideUp();
        }).bind('toggle', function () {
            if (selectBox.hasClass('expanded')) {
                dropDown.trigger('hide');
            } else {
                dropDown.trigger('show');
            }
        });

        selectBox.on('click', function () {
            dropDown.trigger('toggle');
            return false;
        });

        $(document).on("click", function () {
            dropDown.trigger('hide');
        });
    });
}

$(function () {
    $('select.selectForm').selectForm();
});

FIDDLE