jQuery实例：带有复选框的下拉列表

在本教程中，我将介绍如何创建一个下拉列表，其中包含带复选框的选项列表。

我已经通过使用 jQuery 函数（如 toggle()、show() 和 hide()）仅用几行代码就能实现此功能。

在这个例子中，我使用 jQuery 来切换下拉菜单。每个选项都包含复选框和标题。单击复选框或其标题时，将选择选项项。当用户提交表单时，所选选项会显示在浏览器中。

jQuery实例：带有复选框的下拉列表

demodownload

自定义下拉列表 HTML

以下 HTML 代码用于创建自定义下拉列表。在这个例子中，我为自定义下拉菜单使用了静态选项。你可以从数据库或其他资源中读取选项以显示动态选项。

我在这个 HTML 中有选项标题和选项列表容器。最初选项列表是隐藏的，在单击选项标题元素时显示。

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

在这个 jQuery 脚本中，我添加了处理自定义下拉切换事件和选择选项的函数。为了模拟默认的 HTML 下拉菜单，我添加了 jQuery 函数来启用复选框以在单击选项标题时选择选项。

$("#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库文件，以确保你的jQuery代码能运行正常。

您可能对以下文章也感兴趣

• 下拉菜单/下拉列表鼠标提示ToolTip
• 如何用JQuery删除或清空下拉列表的选项
• 怎样使用JQuery动态增加下拉列表选项（option）
• 如何使用JQuery动态填充下拉列表（DropDownList）