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

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

我正在使用这个演示中的代码，它很好地实现了这个效果：http://tympanus.net/Tutorials/CustomDropDownListStyling/

然而，我想用几个下拉菜单来做这件事，并试图自定义演示的代码来做到这一点

HTML:

<section id="options" class="clearfix combo-filters">
    <div class="option-combo size">                     
    <div id="dd" class="wrapper-dropdown-3" tabindex="1">
    <span data-key="Size: ">Size</span>
      <ul class="dropdown option-set clearfix " data-filter-group="size"> 
        <li><a href="#filter-size-any" data-filter-value="" class="selected">Any</a>
          <li><a href="#filter-size-tiny" data-filter-value=".tiny">Tiny</a>
          <li><a href="#filter-size-small" data-filter-value=".small">Small</a>
          <li><a href="#filter-size-medium1" data-filter-value=".medium1">Medium</a>
          <li><a href="#filter-size-large" data-filter-value=".large">Large</a>
          <li><a href="#filter-size-giant" data-filter-value=".giant">Giant</a>
      </ul>
      </div>
    </div>

    <div class="option-combo hair">
              <div id="ee" class="wrapper-dropdown-3" tabindex="2">
      <span data-key="Hair:">Hair</span>
            <ul class="dropdown option-set clearfix " data-filter-group="hair"> 
        <li><a href="#filter-hair-any" data-filter-value="" class="selected">Any</a>
          <li><a href="#filter-hair-short" data-filter-value=".short">Short</a>
          <li><a href="#filter-hair-medium2" data-filter-value=".medium2">Medium</a>
          <li><a href="#filter-hair-long" data-filter-value=".long">Long</a>

      </ul>
      </div>
    </div>

    <div class="option-combo trainability">
              <div id="ff" class="wrapper-dropdown-3" tabindex="3">
      <span>Trainability</span>
      <ul class="dropdown option-set clearfix " data-filter-group="trainability"> 
        <li><a href="#filter-shape-any" data-filter-value="" class="selected">Any</a>
          <li><a href="#filter-trainability-easy" data-filter-value=".easy">Easy</a>
          <li><a href="#filter-trainability-average" data-filter-value=".average">Average</a>
          <li><a href="#filter-trainability-difficult" data-filter-value=".difficult">Difficult</a>
          <li><a href="#filter-trainability-vdifficult" data-filter-value=".vdifficult">Very Difficult</a>
      </ul>
      </div>
    </div>

jQuery:

 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');
        });
    });
});

这里有一个JsFiddlejsfiddle