如何在一个页面上两次使用此多选下拉列表，以便每个实例输出到其自己的数组？

Question

I want to place two separate multiselct dropdown menus on one page for a form I am designing.

I found this lovely dropdown with checkboxes that I would like to use:

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

I am trying to figure out the best way to run two instances of this dropdown on the same page, so that each dropdown's selections are saved in their own array.

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

Right now, if I place two instances of the button's HTML on my page, both dropdowns will modify the same "options" array because it's using a class selector for dropdown-menu. I know I can use an ID selector instead of a class selector, and then just use the same block of jQuery over again with a different array, but is that really the best way to do this? I am new to jQuery but that seems bloated.

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