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 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;
}

#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;
  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; /* 按钮内容左对齐 */
  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; /* 确保 .b 的绝对定位相对于它 */
}

$(function() {
  // 1. 初始化每个自定义下拉框
  $(".box").each(function() {
    let langArray = []; // 为每个box实例创建独立的langArray
    // 遍历当前box内的原生select选项，构建自定义列表项
    $(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('')避免多次DOM操作
    // 设置按钮的初始显示内容为第一个选项
    $(this).find(".btn-select").html(langArray[0]);
    // 假设第一个选项的值为'en'，这里可以根据实际需求动态设置
    $(this).find(".btn-select").attr("value", $(this).find(".vodiapicker option:eq(1)").val()); 
  });

  // 2. 全局点击事件处理：点击组件外部时关闭所有打开的下拉框
  $(document).click(function(event) {
    // 检查点击目标是否是任何 .btn-select 按钮
    if (!$(event.target).closest(".lang-select").length) {
      // 如果点击目标不在任何 .lang-select 区域内，则关闭所有打开的下拉框
      $(".box").each(function() {
        if ($(this).find(".b").is(':visible')) {
          $(this).find(".b").toggle();
        }
      });
    }
  });

  // 3. 列表项点击事件处理：选择一个选项
  $("li").click(function() {
    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所属的自定义下拉框的按钮和列表容器
    // 使用parents("div.lang-select")向上查找最近的父级 .lang-select
    $(this).parents("div.lang-select").find(".btn-select").html(item);
    $(this).parents("div.lang-select").find(".btn-select").attr("value", value);
    $(this).parents("div.lang-select").find(".b").toggle(); // 关闭当前下拉框
  });

  // 4. 按钮点击事件处理：打开/关闭当前下拉框，并关闭其他已打开的下拉框
  $(".btn-select").click(function(event) {
    event.stopPropagation(); // 阻止事件冒泡到document，防止立即触发全局点击关闭

    const currentBox = $(this).closest(".box"); // 获取当前点击按钮所属的.box

    // 关闭所有其他box中已打开的下拉框
    $(".box").not(currentBox).each(function() {
        $(this).find(".b").hide(); 
    });

    // 切换当前box的下拉框显示状态
    currentBox.find(".b").toggle();
  });
});