卡卡網(wǎng)

在本教程中，我將介紹如何創(chuàng)建一個(gè)下拉列表，其中包含帶復(fù)選框的選項(xiàng)列表。

我已經(jīng)通過(guò)使用 jQuery 函數(shù)（如 toggle()、show() 和 hide()）僅用幾行代碼就能實(shí)現(xiàn)此功能。

在這個(gè)例子中，我使用 jQuery 來(lái)切換下拉菜單。每個(gè)選項(xiàng)都包含復(fù)選框和標(biāo)題。單擊復(fù)選框或其標(biāo)題時(shí)，將選擇選項(xiàng)項(xiàng)。當(dāng)用戶提交表單時(shí)，所選選項(xiàng)會(huì)顯示在瀏覽器中。

jQuery實(shí)例：帶有復(fù)選框的下拉列表

demodownload

自定義下拉列表 HTML

以下 HTML 代碼用于創(chuàng)建自定義下拉列表。在這個(gè)例子中，我為自定義下拉菜單使用了靜態(tài)選項(xiàng)。你可以從數(shù)據(jù)庫(kù)或其他資源中讀取選項(xiàng)以顯示動(dòng)態(tài)選項(xiàng)。

我在這個(gè) HTML 中有選項(xiàng)標(biāo)題和選項(xiàng)列表容器。最初選項(xiàng)列表是隱藏的，在單擊選項(xiàng)標(biāo)題元素時(shí)顯示。

<div id="checkbox-dropdown-container">
  <form id="fromCustomSelect" name="fromCustomSelect" action="" method="post">

    <div class="custom-select" id="custom-select">Select Multi Options...</div>
      <div id="custom-select-option-box">
        <div class="custom-select-option">
          <input onchange="toggleFillColor(this);"
            class="custom-select-option-checkbox" type="checkbox"
            name="toys[]" value="Fidget Spinner"> Fidget Spinner
        </div>
        <div class="custom-select-option">
          <input onchange="toggleFillColor(this);"
            class="custom-select-option-checkbox" type="checkbox"
            name="toys[]" value="Lego Bricks"> Lego Bricks
        </div>
        <div class="custom-select-option">
          <input onchange="toggleFillColor(this);"
            class="custom-select-option-checkbox" type="checkbox"
            name="toys[]" value="YoYo"> YoYo
        </div>
        <div class="custom-select-option">
          <input onchange="toggleFillColor(this);"
            class="custom-select-option-checkbox" type="checkbox"             
            name="toys[]" value="Barbie Doll"> Barbie Doll
        </div>
      </div>
    </div>
  </form>
</div>

用于自定義多選下拉菜單的 jQuery 函數(shù)

在這個(gè) jQuery 腳本中，我添加了處理自定義下拉切換事件和選擇選項(xiàng)的函數(shù)。為了模擬默認(rèn)的 HTML 下拉菜單，我添加了 jQuery 函數(shù)來(lái)啟用復(fù)選框以在單擊選項(xiàng)標(biāo)題時(shí)選擇選項(xiàng)。

$("#custom-select").on("click",function(){
  $("#custom-select-option-box").toggle();
});
function toggleFillColor(obj) {
  $("#custom-select-option-box").show();
  if($(obj).prop('checked') == true) {
    $(obj).parent().css("background",'#c6e7ed');
  } else {
    $(obj).parent().css("background",'#FFF');
  }
}
$(".custom-select-option").on("click", function(e) {
  var checkboxObj = $(this).children("input");
  if($(e.target).attr("class") != "custom-select-option-checkbox") {
    if($(checkboxObj).prop('checked') == true) {
      $(checkboxObj).prop('checked',false)
    } else {
      $(checkboxObj).prop("checked",true);
    }
  }
  toggleFillColor(checkboxObj);
});

$("body").on("click",function(e){
  if(e.target.id != "custom-select" && $(e.target).attr("class") != "custom-select-option") {
    $("#custom-select-option-box").hide();
  }
});

不要忘記要先引用jQuery庫(kù)文件，以確保你的jQuery代碼能運(yùn)行正常。

您可能對(duì)以下文章也感興趣

• 下拉菜單/下拉列表鼠標(biāo)提示ToolTip
• 如何用JQuery刪除或清空下拉列表的選項(xiàng)
• 怎樣使用JQuery動(dòng)態(tài)增加下拉列表選項(xiàng)（option）
• 如何使用JQuery動(dòng)態(tài)填充下拉列表（DropDownList）

標(biāo)簽: 下拉列表