jQuery自定义带图片下拉菜单：多实例独立事件处理指南

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- 第一个下拉菜单实例 -->
<div class="box" id="one">
  <!-- 隐藏的原生select，作为数据源 -->
  <select class="vodiapicker">
    <option>Select one</option>
    <option value="en" class="test" data-thumbnail="images/3.png">
      English
    </option>
    <option value="au" data-thumbnail="images/3.png">Engllish (AU)</option>
  </select>

  <!-- 自定义下拉菜单的UI容器 -->
  <div class="lang-select">
    <!-- 显示当前选中项的按钮 -->
    <button class="btn-select" value=""></button>
    <!-- 下拉列表容器 -->
    <div class="b">
      <ul class="lang-options-list"></ul> <!-- 推荐使用类名而非重复ID -->
    </div>
  </div>
</div>

<!-- 第二个下拉菜单实例 -->
<div class="box" id="two">
  <select class="vodiapicker">
    <option>Select one</option>
    <option value="en" class="test" data-thumbnail="images/3.png">
      french
    </option>
    <option value="au" data-thumbnail="images/3.png">french F</option>
  </select>

  <div class="lang-select">
    <button class="btn-select" value=""></button>
    <div class="b">
      <ul class="lang-options-list"></ul> <!-- 推荐使用类名而非重复ID -->
    </div>
  </div>
</div>

.vodiapicker {
  display: none; /* 隐藏原生的select元素 */
}

.lang-options-list { /* 替代#a */
  padding-left: 0px;
}

.lang-options-list img,
.btn-select img {
  width: 18px; /* 选项和按钮中图片的宽度 */
}

.lang-options-list li { /* 替代#a li */
  list-style: none;
  padding-top: 5px;
  padding-bottom: 5px;
}

.lang-options-list li:hover { /* 替代#a li:hover */
  background-color: #f4f3f3; /* 选项悬停背景色 */
}

.lang-options-list li img { /* 替代#a li img */
  margin: 5px;
}

.lang-options-list li span,
.btn-select li span { /* 替代#a li span */
  margin-left: 30px;
}

/* 下拉列表容器样式 */
.b {
  display: none; /* 初始隐藏 */
  width: 100%;
  max-width: 350px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  position: absolute; /* 使下拉列表浮动在其他内容之上 */
  background-color: #fff; /* 背景色 */
  z-index: 1000; /* 确保在最上层 */
}

.open {
  display: block !important; /* 用于强制显示下拉列表 */
}

/* 自定义按钮样式 */
.btn-select {
  margin-top: 10px;
  width: 100%;
  max-width: 350px;
  height: 34px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  text-align: left; /* 文本左对齐 */
  padding: 0 10px; /* 按钮内边距 */
  cursor: pointer; /* 鼠标指针 */
}

.btn-select li {
  list-style: none;
  float: left;
  padding-bottom: 0px;
}

.btn-select:hover li {
  margin-left: 0px;
}

.btn-select:hover {
  background-color: #f4f3f3;
  border: 1px solid transparent;
  box-shadow: inset 0 0px 0px 1px #ccc;
}

.btn-select:focus {
  outline: none; /* 移除焦点轮廓 */
}

.lang-select {
  /* margin-left: 50px; */ /* 根据需要调整 */
  position: relative; /* 使下拉列表相对于此容器定位 */
}

$(function() { // 确保DOM加载完毕后执行
  // 1. 初始化每个下拉菜单实例
  $(".box").each(function() {
    let langArray = []; // 为每个.box实例创建独立的langArray，避免数据混淆
    const $currentBox = $(this); // 缓存当前.box元素

    $currentBox.find(".vodiapicker option").each(function() {
      let img = $(this).attr("data-thumbnail");
      let text = this.innerText;
      let value = $(this).val();
      let item =
        '<li><img src="' +
        img +
        '" alt="" value="' +
        value +
        '"><span>' +
        text +
        "</span></li>";
      langArray.push(item);
    });

    // 将生成的列表项填充到当前.box内的ul元素
    $currentBox.find(".lang-options-list").html(langArray.join('')); // 使用类选择器并join数组

    // 设置初始按钮显示内容和值
    $currentBox.find(".btn-select").html(langArray[0]);
    // 假设第一个选项的值是'en'，或者根据实际需求从langArray[0]中解析
    // 这里为了示例，直接设为'en'，实际应从第一个option或langArray[0]中获取
    $currentBox.find(".btn-select").attr("value", $currentBox.find(".vodiapicker option:eq(1)").val()); 
  });

  // 2. 点击下拉列表项 (li) 事件处理
  // 使用事件委托，因为li是动态生成的
  $(document).on('click', '.lang-options-list li', function() {
    const $clickedLi = $(this);
    const img = $clickedLi.find("img").attr("src");
    const value = $clickedLi.find("img").attr("value"); // 注意：img上的value属性可能不是标准做法，通常从li或其子元素获取
    const text = $clickedLi.text(); // 获取文本内容，不包含img alt
    let item =
      '<li><img src="' + img + '" alt="" /><span>' + text + "</span></li>";

    // 找到当前li所属的lang-select容器，并更新其内部的btn-select和关闭其b
    const $parentLangSelect = $clickedLi.parents("div.lang-select");
    $parentLangSelect.find(".btn-select").html(item);
    $parentLangSelect.find(".btn-select").attr("value", value);
    $parentLangSelect.find(".b").toggle(); // 关闭当前下拉列表
  });

  // 3. 点击自定义按钮 (.btn-select) 事件处理
  $(".btn-select").click(function() {
    const $currentBtn = $(this);
    const $parentLangSelect = $currentBtn.parents("div.lang-select");
    const $currentDropdown = $parentLangSelect.find(".b");

    // 切换当前下拉列表的显示状态
    $currentDropdown.toggle();

    // 关闭其他可能打开的下拉列表
    $(".box").each(function() {
      const $otherBox = $(this);
      const $otherDropdown = $otherBox.find(".b");
      // 如果不是当前下拉列表，且处于可见状态，则关闭
      if (!$otherBox.is($currentBtn.parents(".box")) && $otherDropdown.is(':visible')) {
        $otherDropdown.toggle();
      }
    });
  });

  // 4. 点击页面其他区域关闭下拉菜单
  $(document).click(function(event) {
    // 检查点击事件的目标是否是任何.btn-select按钮或其内部元素
    // 或者是否是任何.lang-options-list li或其内部元素
    if (!$(event.target).closest(".btn-select").length && !$(event.target).closest(".b").length) {
      // 如果点击发生在.btn-select或.b之外，则关闭所有可见的下拉列表
      $(".b").each(function() {
        if ($(this).is(':visible')) {
          $(this).toggle();
        }
      });
    }
  });
});