Javascript 如何在jQuery中向不同的下拉列表添加不同的前缀

在用户单击我的下拉列表上的菜单选项后，我希望顶部标签的原始菜单标题后面跟一个冒号，后面跟他们刚刚单击的选项

我正在使用这个演示中的代码，它很好地实现了这个效果：

然而，我想通过几个下拉列表来实现这一点，并试图定制演示的代码来实现这一点。以下是我尝试过的：

HTML:

这里有一个JSFIDLE，为这个

---

问题是您正在使用闭包变量来保存组。由于每个下拉列表都有其on键值，因此组是一个实例值（不是共享值-因此不应在此处使用闭包）

在下面的解决方案中，该组被添加为

下拉列表的实例属性，稍后在选择过程中使用

试试这个

jQuery(function(){

    function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.dropdown > li');
        this.val = '';
        this.index = -1;
        this.initEvents();
        this.group = this.placeholder.data('key');
        this.group = this.group.charAt(0).toUpperCase() + this.group.substring(1) + ':';
    }
    DropDown.prototype = {
        initEvents: function () {
            var obj = this;

            obj.dd.on('click', function (event) {
                jQuery(this).toggleClass('active');
                return false;
            });

            obj.opts.on('click', function () {
                var opt = jQuery(this);
                obj.val = opt.text();
                obj.index = opt.index();
                obj.placeholder.text(obj.group + obj.val);
            });
        },
        getValue: function () {
            return this.val;
        },
        getIndex: function () {
            return this.index;
        }
    };

    new DropDown(jQuery('#dd'));
    new DropDown(jQuery('#ff'));
    new DropDown(jQuery('#ee'));

    jQuery(document).click(function () {
        // all dropdowns
        jQuery('.wrapper-dropdown-3').removeClass('active');
    });
});

演示：

 jQuery(document).ready(function(){

/*   my code */

     var group="";

     if ($(this).find('span').data('key')==="size") {
         group="Size: ";
     }else if ($(this).find('span').data('key')==="hair")   {
      group="Hair: ";
      }

/* my code end */

    function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.dropdown > li');
        this.val = '';
        this.index = -1;
        this.initEvents();
    }
    DropDown.prototype = {
        initEvents: function () {

            var obj = this;

            obj.dd.on('click', function (event) {
                jQuery(this).toggleClass('active');
                return false;
            });

            obj.opts.on('click', function () {
                var opt = jQuery(this);
                obj.val = opt.text();
                obj.index = opt.index();
                obj.placeholder.text(group + obj.val);
            });
        },
        getValue: function () {
            return this.val;
        },
        getIndex: function () {
            return this.index;
        }
    },
    jQuery(function () {
        var dd = new DropDown(jQuery('#dd'));

        jQuery(document).click(function () {
            // all dropdowns
            jQuery('.wrapper-dropdown-3').removeClass('active');
        });
    });

     jQuery(function () {
        var dd = new DropDown(jQuery('#ee'));

        jQuery(document).click(function () {
            // all dropdowns
            jQuery('.wrapper-dropdown-3').removeClass('active');
        });
    });

     jQuery(function () {
        var dd = new DropDown(jQuery('#ff'));

        jQuery(document).click(function () {
            // all dropdowns
            jQuery('.wrapper-dropdown-3').removeClass('active');
        });
    });

});

jQuery(function(){

    function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.dropdown > li');
        this.val = '';
        this.index = -1;
        this.initEvents();
        this.group = this.placeholder.data('key');
        this.group = this.group.charAt(0).toUpperCase() + this.group.substring(1) + ':';
    }
    DropDown.prototype = {
        initEvents: function () {
            var obj = this;

            obj.dd.on('click', function (event) {
                jQuery(this).toggleClass('active');
                return false;
            });

            obj.opts.on('click', function () {
                var opt = jQuery(this);
                obj.val = opt.text();
                obj.index = opt.index();
                obj.placeholder.text(obj.group + obj.val);
            });
        },
        getValue: function () {
            return this.val;
        },
        getIndex: function () {
            return this.index;
        }
    };

    new DropDown(jQuery('#dd'));
    new DropDown(jQuery('#ff'));
    new DropDown(jQuery('#ee'));

    jQuery(document).click(function () {
        // all dropdowns
        jQuery('.wrapper-dropdown-3').removeClass('active');
    });
});