使用Dropdown.js插件，li变化时如何获取其属性值？

嘿，我来帮你搞定这个问题！你用的是基于jQuery的Dropdown.js可搜索多选下拉插件，现在需要在<ul>里的<li>发生变化（比如选中、新增、移除）时获取它们的data-value属性值对吧？下面给你几种实用的解决方案：

方法1：利用插件自带的change事件（首推） #

这类UI插件一般都会内置事件来监听选项变化，Dropdown.js也不例外。你可以在初始化插件时直接绑定onChange回调，或者后续单独监听change事件，轻松拿到选中项的属性：

// 初始化插件时绑定回调函数
$('.demo').dropdown({
  multipleMode: 'label',
  onChange: function(selectedItems) {
    // selectedItems是选中的<li>元素集合
    selectedItems.each(function() {
      const itemValue = $(this).data('value'); // 获取data-value属性
      const itemText = $(this).text(); // 获取选项显示文本
      console.log(`选中项：value=${itemValue}，文本=${itemText}`);
    });
  }
});

// 或者单独绑定change事件（适合后续追加监听）
$('.demo').on('change', function() {
  const selectedItems = $(this).dropdown('getSelectedItems');
  selectedItems.each(function() {
    console.log('选中项的data-value：', $(this).data('value'));
  });
});

方法2：直接监听

的交互事件 #

如果插件内置事件满足不了你的需求，你可以通过事件委托给动态生成的<li>绑定点击或选中事件（因为这些<li>是插件渲染出来的，直接绑定会失效）：

// 监听<li>的点击事件
$(document).on('click', '.dropdown-option', function() {
  const currentValue = $(this).data('value');
  console.log('点击的选项value：', currentValue);

  // 可以判断该选项是否被选中（插件通常会给选中项加类似dropdown-option-selected的类）
  if ($(this).hasClass('dropdown-option-selected')) {
    console.log('这个选项已被选中，value是：', currentValue);
  }
});

方法3：监听DOM变化（处理动态更新场景） #

如果你的选项是异步加载或者动态修改的，用MutationObserver来监听<ul>的子元素变化，不管选项是新增、删除还是修改，都能触发回调获取属性：

// 获取目标<ul>元素
const targetUl = $('.dropdown-main ul')[0];

// 创建MutationObserver实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // 当<ul>的子元素发生变化时，遍历所有<li>
    if (mutation.type === 'childList') {
      $('.dropdown-option').each(function() {
        const itemValue = $(this).data('value');
        console.log('选项的data-value：', itemValue);
      });
    }
  });
});

// 配置观察规则：监听子元素变化，包括子树
const observerConfig = { childList: true, subtree: true };

// 启动观察
observer.observe(targetUl, observerConfig);

// 不需要观察时可以停止
// observer.disconnect();

小提示 #

• 优先用方法1，这是插件官方提供的方式，兼容性和稳定性最好；
• 方法2适合快速监听单个选项的交互行为；
• 方法3适合处理选项动态更新的复杂场景。

内容的提问来源于stack exchange，提问作者Muhammad Umair