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>

  <!-- 自定义下拉框的显示部分 -->
  <div class="lang-select">
    <!-- 按钮，显示当前选中的项 -->
    <button class="btn-select" value=""></button>
    <!-- 下拉列表容器 -->
    <div class="b">
      <!-- 实际的下拉选项列表 -->
      <ul id="a"></ul>
    </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 id="a"></ul>
    </div>
  </div>
</div>

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

#a {
  padding-left: 0px;
}

#a img,
.btn-select img {
  width: 18px; /* 设置图片宽度 */
}

#a li {
  list-style: none; /* 移除列表项默认样式 */
  padding-top: 5px;
  padding-bottom: 5px;
  cursor: pointer; /* 鼠标悬停显示手型 */
}

#a li:hover {
  background-color: #f4f3f3; /* 列表项悬停背景色 */
}

#a li img {
  margin: 5px;
}

#a li span,
.btn-select 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;
  background-color: #fff; /* 背景色 */
  position: absolute; /* 确保它浮动在其他内容之上 */
  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; /* 使得图片和文本可以并排显示 */
  align-items: center; /* 垂直居中 */
}

.btn-select li {
  list-style: none;
  float: left; /* 保持图片和文本在同一行 */
  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; /* 为绝对定位的.b提供参照 */
}

$(function() {
  // 1. 初始化每个自定义下拉框
  $(".box").each(function() {
    let langArray = []; // 声明为let，确保每个box有独立的langArray
    // 遍历当前box内的原生select的option，提取数据并构建自定义列表项
    $(this)
      .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#a中
    $(this).find("#a").html(langArray.join('')); // 使用join('')避免多余逗号
    // 设置按钮的初始显示内容为第一个选项
    $(this).find(".btn-select").html(langArray[0]);
    // 设置按钮的初始值为"en" (可根据实际需求调整)
    $(this).find(".btn-select").attr("value", "en");
  });

  // 2. 实现点击外部关闭所有下拉框的功能
  $(document).click(function(event) {
    // 如果点击的不是.btn-select按钮，则关闭所有打开的下拉框
    if (!$(event.target).closest(".lang-select").length) {
      $(".box").each(function() {
        if ($(this).find(".b").is(':visible')) {
          $(this).find(".b").toggle();
        }
      });
    }
  });

  // 3. 处理列表项（li）点击事件
  $("li").click(function() {
    // 获取被点击li项的图片、值和文本
    let img = $(this).find("img").attr("src");
    let value = $(this).find("img").attr("value");
    let text = $(this).find("span").text(); // 确保获取到span内的文本
    let item =
      '<li><img src="' + img + '" alt="" /><span>' + text + "</span></li>";

    // 找到当前li所属的自定义下拉框的按钮，并更新其内容和值
    $(this).parents("div.lang-select").find(".btn-select").html(item);
    $(this).parents("div.lang-select").find(".btn-select").attr("value", value);
    // 关闭当前li所属的下拉列表
    $(this).parents("div.lang-select").find(".b").toggle();
  });

  // 4. 处理按钮（.btn-select）点击事件
  $(".btn-select").click(function(event) {
    event.stopPropagation(); // 阻止事件冒泡到document，防止立即关闭
    const currentBoxId = $(this).parents(".box").attr("id");

    // 关闭所有其他打开的下拉框
    $(".box").each(function() {
      if ($(this).attr("id") !== currentBoxId && $(this).find(".b").is(':visible')) {
        $(this).find(".b").toggle();
      }
    });

    // 切换当前点击按钮对应的下拉列表的显示状态
    $(this).parents("div.lang-select").find(".b").toggle();
  });
});