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

Question

Я хочу разместить два отдельных многоцелевых выпадающих меню на одной странице для формы, которую я разрабатываю.

Я нашел этот прекрасный выпадающий список с флажками, которые я хотел бы использовать:

https://codepen.io/bseth99/pen/fboKH

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

var options = [];

$( '.dropdown-menu a' ).on( 'click', function( event ) {

   var $target = $( event.currentTarget ),
       val = $target.attr( 'data-value' ),
       $inp = $target.find( 'input' ),
       idx;

   if ( ( idx = options.indexOf( val ) ) > -1 ) {
      options.splice( idx, 1 );
      setTimeout( function() { $inp.prop( 'checked', false ) }, 0);
   } else {
      options.push( val );
      setTimeout( function() { $inp.prop( 'checked', true ) }, 0);
   }

   $( event.target ).blur();

   console.log( options );
   return false;
});

Прямо сейчас, если я размещу два экземпляра HTML-кода кнопки на своей странице, оба раскрывающихся списка изменят один и тот же массив «параметров», поскольку он использует селектор класса для выпадающего меню.Я знаю, что могу использовать селектор идентификатора вместо селектора класса, а затем просто снова использовать тот же блок jQuery с другим массивом, но действительно ли это лучший способ сделать это?Я новичок в jQuery, но это кажется раздутым.

Answer 1

$( '.dropdown-menu a' ).on( 'click', function( event ) {

   var $target = $( this ),
       val = $target.data( 'value' ),
       $inp = $target.find( 'input' ),
       idx;

   var options = $target.closest('.dropdown-menu').data('options') || [];


   if ( ( idx = options.indexOf( val ) ) > -1 ) {
      options.splice( idx, 1 );
      setTimeout( function() { $inp.prop( 'checked', false ) }, 0);
   } else {
      options.push( val );
      setTimeout( function() { $inp.prop( 'checked', true ) }, 0);
   }

   $target.closest('.dropdown-menu').data('options', options);

   $( event.target ).blur();

   return false;
});

console.log($( '.dropdown-menu:eq(0)' ).data('options'));