时间戳

首页 > 解决方案 > 如何在一页上使用此多选下拉菜单两次，以便每个实例输出到自己的数组？

javascript - 如何在一页上使用此多选下拉菜单两次，以便每个实例输出到自己的数组？

问题描述

我想为我正在设计的表单在一个页面上放置两个单独的 multiselct 下拉菜单。

我发现这个可爱的下拉列表带有我想使用的复选框：

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 实例，两个下拉菜单都会修改相同的“选项”数组，因为它使用下拉菜单的类选择器。我知道我可以使用 ID 选择器而不是类选择器，然后使用不同的数组再次使用相同的 jQuery 块，但这真的是最好的方法吗？我是 jQuery 的新手，但这似乎很臃肿。

标签： javascriptjqueryhtmltwitter-bootstrap

解决方案

$( '.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'));

推荐阅读