jQuery實現帶圖片自定義下拉選擇框：多實例獨立事件處理與優化

本文詳細介紹瞭如何使用jQuery構建帶有圖片選項的自定義下拉選擇框，並著重解決了多個此類組件在頁面上共存時可能出現的事件衝突和內容混淆問題。通過優化DOM選擇器和事件處理邏輯，確保每個下拉框都能獨立響應用戶操作，同時提供外部點擊關閉功能，提升用戶體驗和組件的健壯性。

引言：自定義下拉框的需求與挑戰

在現代Web開發中，原生的HTML 元素功能有限，無法直接支持在選項中嵌入圖片或其他富文本內容。為了實現帶有圖片或更複雜佈局的下拉選擇框，開發者通常會採用自定義的方式，利用

、、

和
• 等元素模擬其行為。然而，當頁面中存在多個這樣的自定義下拉框實例時，如果不當處理事件和DOM操作，很容易出現所有下拉框同時打開、內容混淆或事件響應不准確的問題。本教程將深入探討如何使用jQuery構建此類組件，並重點解決多實例之間的獨立性問題。

  核心HTML結構

  為了實現帶圖片的自定義下拉框，我們需要一個包裹容器來區分每個獨立的組件實例。這裡我們使用.box 類作為每個自定義選擇框的頂級容器，並通過唯一的id (如one, two) 來進一步標識它們。每個.box 內部包含一個原生隱藏的

元素（用於存儲原始數據和值），以及一個模擬的自定義下拉框結構，該結構由一個按鈕(.btn-select) 和一個包含選項列表的div (.b 及其內部的ul#a) 組成。

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

注意事項：儘管在div.box 內部使用id="a" 配合$(this).find("#a") 可以工作，但從HTML規範和最佳實踐來看，ID在文檔中應該是唯一的。如果多個元素需要相同的標識來應用樣式或行為，應優先使用類（class="a"）。在本教程的解決方案中，由於jQuery的find() 方法限定了搜索範圍，即使ID重複也能正確工作，但建議在實際項目中避免重複ID。

CSS樣式定義

CSS負責隱藏原生 元素，並美化自定義下拉框的按鈕和選項列表。

 .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 的絕對定位相對於它*/
}

注意事項：為了確保下拉列表(.b) 能夠正確浮動並覆蓋其他內容，為其添加position: absolute; 和z-index 是必要的。同時，其父元素.lang-select 需要設置position: relative;。

jQuery邏輯：實現獨立事件處理

關鍵在於使用jQuery的遍歷和上下文選擇器（如$(this) 和parents(), find()），確保所有操作都僅限於當前正在處理的組件實例。

 $(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 =
          '

' text "

"; 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 = '

' text "

"; // 找到當前點擊的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(); }); });

代碼解析與優化：

1. 初始化($(".box").each(...)) :

   • 使用$(".box").each() 遍歷每個獨立的自定義下拉框容器。
   • 在每個迭代中，$(this) 指向當前的.box 元素，確保所有find() 操作都在當前.box 的作用域內進行，從而避免不同實例間的內容混淆。
   • langArray 在每次each 循環中被重新聲明為let langArray = [];，保證每個.box 都有其獨立的選項數組，不會互相影響。
   • langArray.join('') 用於將數組元素拼接成一個字符串，然後一次性設置到DOM中，這比在循環中多次調用html() 或append() 效率更高。
   • 按鈕的初始值和文本設置也同樣通過$(this).find() 確保針對當前實例。

2. 全局點擊事件($(document).click(...)) :

   • 這個事件監聽器用於實現“點擊組件外部區域時關閉下拉框”的功能。
   • !$(event.target).closest(".lang-select").length 判斷點擊事件的源頭是否在任何.lang-select 區域（即自定義下拉框的按鈕或列表）之外。
   • 如果點擊在外部，則遍歷所有.box，找到所有可見的下拉列表(.b) 並將其關閉。

3. 列表項點擊事件($("li").click(...)) :

   • 當用戶點擊某個選項(
   • ) 時，需要更新對應按鈕的顯示內容和值，並關閉該下拉列表。
   • $(this).parents("div.lang-select") 是這裡的關鍵。它從被點擊的
   • 元素開始，向上查找最近的div.lang-select 父元素，從而確定是哪個自定義下拉框被操作。這樣，即使頁面上有多個
   • 元素，也能精確地找到其所屬的組件。
   • find(".btn-select") 和find(".b") 則在該div.lang-select 範圍內查找對應的按鈕和列表容器進行操作。

4. 按鈕點擊事件($(".btn-select").click(...)) :

   • 當用戶點擊自定義下拉框的按鈕時，應該切換其下拉列表的顯示狀態。
   • event.stopPropagation(); 是至關重要的一步，它阻止點擊事件向上冒泡到document。如果沒有這一行，點擊按鈕打開下拉框後，$(document).click 會立即觸發並再次關閉它。
   • const currentBox = $(this).closest(".box"); 獲取當前被點擊按鈕所屬的.box 容器。
   • $(".box").not(currentBox).each(function() { ... }); 遍歷所有除了當前currentBox 之外的.box 元素，並關閉它們內部的下拉列表(.b). 這種方式比硬編碼id="one" 或id="two" 更加通用和可擴展。
   • 最後，currentBox.find(".b").toggle(); 切換當前點擊的下拉框的顯示狀態。

總結與進一步優化

通過上述的HTML結構、CSS樣式和jQuery腳本，我們成功地構建了帶有圖片選項的自定義下拉選擇框，並解決了多實例共存時的事件衝突和內容混淆問題。關鍵在於：

• 局部化選擇器：始終利用$(this)、find()、closest() 和parents() 等方法，將jQuery操作限制在當前組件的DOM範圍內。
• 事件冒泡控制：使用event.stopPropagation() 防止不必要的全局事件觸發。
• 通用關閉邏輯：採用遍歷所有組件並排除當前組件的方式，實現其他下拉框的自動關閉，而非硬編碼特定ID。

進一步優化建議：

• 可訪問性(Accessibility):對於自定義組件，應考慮鍵盤導航（Tab鍵、方向鍵）和屏幕閱讀器支持。這通常涉及添加ARIA屬性（如aria-haspopup, aria-expanded, aria-labelledby）和額外的鍵盤事件監聽。
• 圖片加載優化：如果圖片數量較多，可以考慮圖片懶加載技術，提升頁面性能。
• CSS背景圖：如答案中提及，可以將圖片設置為按鈕的背景圖，而不是直接嵌入 標籤，這樣可以避免圖片元素本身阻礙按鈕的點擊事件，並提供更大的樣式靈活性。
• 組件化：對於更複雜的應用，可以考慮將此功能封裝成一個可複用的jQuery插件或原生JavaScript類，提高代碼的模塊化和可維護性。
• 狀態管理：如果需要將選中的值持久化，可以重新引入localStorage 或其他客戶端存儲機制。在初始化時讀取存儲的值，並相應地設置下拉框的初始狀態。