提升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="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 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;
}

/* item list */

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

.open {
  display: show !important; /* 用于强制显示，但实际代码中使用toggle */
}

.btn-select {
  margin-top: 10px;
  width: 100%;
  max-width: 350px;
  height: 34px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
}

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

$(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();
        // 构建列表项HTML
        let item =
          '<li><img src="' +
          img +
          '" alt="" value="' +
          value +
          '"><span>' +
          text +
          "</span></li>";
        langArray.push(item);
      });

    // 将构建好的列表项填充到当前box的ul#a中
    $(this).find("#a").html(langArray);
    // 设置当前box的btn-select按钮的初始内容为第一个选项
    $(this).find(".btn-select").html(langArray[0]);
    $(this).find(".btn-select").attr("value", "en"); // 初始值可根据需求设定
  });

  // 2. 实现点击文档任意位置关闭下拉菜单
  $(document).click(function(event) {
    // 如果点击的不是btn-select按钮，则检查并关闭所有打开的下拉菜单
    if (!$(event.target).closest("button.btn-select").length) {
      $(".box").each(function() {
        if ($(this).find(".b").is(':visible')) {
          $(this).find(".b").toggle();
        }
      });
    }
  });

  // 3. 处理列表项（li）的点击事件
  $("li").click(function() {
    let img = $(this).find("img").attr("src");
    let value = $(this).find("img").attr("value");
    let text = this.innerText;
    let item =
      '<li><img src="' + img + '" alt="" /><span>' + text + "</span></li>";

    // 找到当前点击li所属的lang-select容器，并更新其btn-select按钮的内容和值
    $(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() {
    const currentBox = $(this).closest('.box'); // 获取当前点击按钮所属的.box
    const currentDropdownList = currentBox.find(".b"); // 获取当前下拉菜单的列表

    // 切换当前下拉菜单的显示状态
    currentDropdownList.toggle();

    // 确保只有一个下拉菜单处于打开状态：
    // 遍历所有.box，如果其他下拉菜单是打开的，则关闭它们
    $(".box").not(currentBox).each(function() {
        const otherDropdownList = $(this).find(".b");
        if (otherDropdownList.is(':visible')) {
            otherDropdownList.toggle();
        }
    });
  });
});