使用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">English (AU)</option>
  </select>

  <!-- 自定义下拉框的显示部分 -->
  <div class="lang-select">
    <!-- 显示当前选中项的按钮 -->
    <button class="btn-select" value=""></button>
    <!-- 模拟下拉列表的容器 -->
    <div class="b">
      <ul class="custom-options"></ul> <!-- 注意：将id="a"改为class="custom-options"以避免ID重复 -->
    </div>
  </div>
</div>

<!-- 第二个自定义下拉框实例 -->
<div class="box" id="two">
  <select class="vodiapicker">
    <option>Select one</option>
    <option value="fr" class="test" data-thumbnail="images/3.png">French</option>
    <option value="ca" data-thumbnail="images/3.png">French (CA)</option>
  </select>

  <div class="lang-select">
    <button class="btn-select" value=""></button>
    <div class="b">
      <ul class="custom-options"></ul> <!-- 注意：将id="a"改为class="custom-options"以避免ID重复 -->
    </div>
  </div>
</div>

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

.custom-options { /* 对应修改后的类名 */
  padding-left: 0px;
  margin: 0; /* 移除默认外边距 */
}

.custom-options img,
.btn-select img {
  width: 18px;
  vertical-align: middle; /* 图像与文本对齐 */
}

.custom-options li {
  list-style: none;
  padding: 5px; /* 统一内边距 */
  cursor: pointer; /* 鼠标悬停显示手型 */
}

.custom-options li:hover {
  background-color: #f4f3f3;
}

.custom-options li img {
  margin-right: 5px; /* 图片右侧间距 */
}

.custom-options li span,
.btn-select li span {
  margin-left: 10px; /* 文本左侧间距 */
}

/* 下拉列表容器 */
.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; /* 确保在最上层 */
}

/* 按钮样式 */
.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;
  display: flex; /* 使用flex布局使内容居中或对齐 */
  align-items: center;
}

.btn-select li {
  list-style: none;
  float: left; /* 原始代码中的float，这里可以结合flexbox优化 */
  padding-bottom: 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() {
  // 1. 初始化每个自定义下拉框
  $(".box").each(function() {
    let langArray = []; // 使用let确保langArray是局部变量，避免不同实例间混淆
    const $currentBox = $(this); // 缓存当前.box元素

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

    // 填充自定义列表
    $currentBox.find(".custom-options").html(langArray); // 对应修改后的类名
    // 设置按钮初始值
    $currentBox.find(".btn-select").html(langArray[0]);
    $currentBox.find(".btn-select").attr("value", langArray[0] ? $(langArray[0]).find("img").attr("value") : ""); // 确保设置正确的value
  });

  // 2. 全局点击事件：点击外部区域关闭所有打开的下拉框
  $(document).click(function(event) {
    // 如果点击的不是 .btn-select 按钮，则检查并关闭所有打开的下拉框
    if (!$(event.target).closest("button.btn-select").length && !$(event.target).closest(".b").length) {
      $(".box").each(function() {
        const $dropdownList = $(this).find(".b");
        if ($dropdownList.is(':visible')) {
          $dropdownList.toggle();
        }
      });
    }
  });

  // 3. 选项点击事件：选择一个选项并关闭当前下拉框
  $(".custom-options li").click(function() { // 对应修改后的类名
    const $clickedLi = $(this);
    const img = $clickedLi.find("img").attr("src");
    const value = $clickedLi.find("img").attr("value");
    const text = $clickedLi.text(); // 获取li的文本内容，更简洁
    const item =
      '<li><img src="' + img + '" alt="" /><span>' + text + "</span></li>";

    // 找到当前下拉框所属的.lang-select容器
    const $parentLangSelect = $clickedLi.parents("div.lang-select");

    // 更新按钮内容和值
    $parentLangSelect.find(".btn-select").html(item);
    $parentLangSelect.find(".btn-select").attr("value", value);

    // 关闭当前下拉列表
    $parentLangSelect.find(".b").toggle();
  });

  // 4. 按钮点击事件：切换下拉框的显示/隐藏状态，并关闭其他已打开的下拉框
  $(".btn-select").click(function(event) {
    event.stopPropagation(); // 阻止事件冒泡到document，防止立即关闭

    const $currentBtn = $(this);
    const $currentLangSelect = $currentBtn.parents("div.lang-select");
    const $currentDropdown = $currentLangSelect.find(".b");

    // 遍历所有下拉框，关闭非当前点击的下拉框
    $(".box").each(function() {
      const $otherLangSelect = $(this).find(".lang-select");
      const $otherDropdown = $otherLangSelect.find(".b");

      // 如果是其他下拉框且它当前是可见的，则关闭它
      if (!$otherLangSelect.is($currentLangSelect) && $otherDropdown.is(':visible')) {
        $otherDropdown.toggle();
      }
    });

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

  // 5. 存储和恢复选中状态 (可选功能，原代码中存在，此处保留但需完善)
  // 注意：原代码中的langArray是局部变量，不能直接用于全局的localStorage操作。
  // 若需实现此功能，应将选中值直接存入localStorage，并在初始化时根据值恢复。
  /*
  var sessionLang = localStorage.getItem("lang");
  if (sessionLang) {
    // 假设您需要根据sessionLang找到对应的item并设置
    // 这需要更复杂的逻辑来匹配所有.box中的选项
  }
  */
});