Изоляция пользовательских выпадающих списков

Question

Я построил настраиваемый выпадающий список, который заменяет старую школу <select> выпадающего списка. Как вы знаете, эти уродливые вещи контролируются браузером, и поскольку сайт в основном темный, я не хочу, чтобы у него был раскрывающийся ящик, похожий на тот, который поставляется с элементом <select>.

Я использовал следующий JS:

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 (e) { 
     var obj = this; 

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

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

$(function() { 

    var dd = new DropDown($('.custom-dropdown')); 
    //var dd = new DropDown($('#dd2')); 

    $(document).click(function() { 
     // all dropdowns 
     $('.wrapper-dropdown-3').removeClass('active'); 
     // dropdown closes by clicking outside 
     $(".custom-dropdown ul").parent().removeClass('active'); 
    }); 

}); 

И HTML выглядит следующим образом:

<div class="form-group"> 
    <label class="control-label">Select Your Area</label> 
    <div id="dd" class="custom-dropdown form-control"> 
     <span>Select One</span> 
     <ul class="dropdown"> 
      <li><a href="#">White/Caucasian</a></li> 
      <li><a href="#">Black/African-American</a></li> 
      <li><a href="#">Hispanic</a></li> 
      <li><a href="#">Asian</a></li> 
      <li><a href="#">Pacific Islander</a></li> 
      <li><a href="#">Middle-Eastern</a></li> 
     </ul> 
    </div> 
</div> 

Если я следующее:

var dd = new DropDown($('#dd')); 
var dd = new DropDown($('#dd2')); 

... 

var dd = new DropDown($('#ddnth')); 

проблема решена. Фактически, это то, что я делал. Но это довольно громоздко. Это приложение будет иметь около 1000 страниц ввода данных. Поэтому это меньше идеала.

My JS показывает var dd = new DropDown($('.custom-dropdown')); Что исправляет проблему инициализации, потому что класс может быть общим, идентификатор не может, НО ... когда я выбираю параметр из одного из выпадающих списков, он заполняет все из них (из-за класса , я знаю) :(

Итак, помогите мне здесь. Как я могу инициализировать это глобально и изолировать раскрывающиеся население просто используется один?

Смотрите мой DEMO here PS Я извиняюсь за SCSS, нажмите на просмотр, если это вам поможет. Даже подумал, что это не вопрос CSS;)

Спасибо, ребята!

Answer 1

Как насчет того, чтобы зацикливать его на каждом уровне.

E.g.

$('.custom-dropdown').each(function (index, value) { 
     var dd = new DropDown($(value)); 
    }); 

Codepen

Answer 2

Вы писали инициатор, как var dd = new DropDown($('.custom-dropdown')); но если $('.custom-dropdown') это несколько элементов, то, что дд ссылается к?

Если бы я добавил функцию прототипа, такую ​​как dd.setValue («значение»), было бы разумно, что все выпадающие меню в dd будут установлены в «значение». dd должен представлять только один раскрывающийся список. Не имеет большого значения, что dd - несколько разных выпадающих списков, если вы получите то, что я пытаюсь сказать.

Либо вы могли бы переписать его на работу в качестве:

$('.custom-dropdown').createDropDown(); 
$('.custom-dropdown').eq(0).getDropDownValue(); 

или вы могли бы иметь каждый отдельный выпадающий список в массиве:

var dds=[]; 
$('.custom-dropdown').each(function(){ 
    dds.push(new DropDown($(this))); 
}); 

dds[2].getValue();