javascript下拉列表菜单的实现方法

JavaScript下拉列表菜单的实现方法分为两种：纯JavaScript实现和使用第三方库实现。

纯JavaScript实现

HTML结构

下拉列表菜单的HTML结构通常由一个<select>标签和多个<option>标签组成。<option>标签是<select>标签的子元素，用于设置下拉菜单中的选项。

具体的HTML结构如下：

<select id="select-menu">
  <option value="">请选择一个选项</option>
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橘子</option>
</select>

JavaScript代码

获取select元素

首先，需要通过document.getElementById()方法获取select元素，

const selectMenu = document.getElementById("select-menu");

给select元素绑定事件

为了显示/隐藏选项，需要给select元素绑定事件。

selectMenu.addEventListener("click", function(){
  if(selectMenu.options[selectMenu.selectedIndex].value !== ''){
    console.log(selectMenu.options[selectMenu.selectedIndex].value);
  }
});

控制选项的显隐

当select元素的点击事件触发时，需要根据select的当前状态（展开还是收起），来控制选项的显隐。

selectMenu.addEventListener("click", function() {
  if (selectMenu.options[selectMenu.selectedIndex].value !== "") {
    console.log(selectMenu.options[selectMenu.selectedIndex].value);
  } else { // 显示/隐藏选项列表
    if (selectMenu.className === "show") { // 隐藏
      selectMenu.className = "";
    } else { // 显示
      selectMenu.className = "show";
    }
  }
});

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript下拉列表菜单的实现方法示例</title>
    <style>
      /* 隐藏选项，默认状态 */
      select {
        display: none;
      }

      /* 显示选项，展开状态 */
      select.show {
        display: block;
      }
    </style>
  </head>

  <body>
    <select id="select-menu">
      <option value="">请选择一个选项</option>
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="orange">橘子</option>
    </select>

    <script>
      const selectMenu = document.getElementById("select-menu");

      selectMenu.addEventListener("click", function() {
        if (selectMenu.options[selectMenu.selectedIndex].value !== "") {
          console.log(selectMenu.options[selectMenu.selectedIndex].value);
        } else { // 显示/隐藏选项列表
          if (selectMenu.className === "show") { // 隐藏
            selectMenu.className = "";
          } else { // 显示
            selectMenu.className = "show";
          }
        }
      });
    </script>
  </body>
</html>

使用第三方库实现

使用第三方库实现大大简化了下拉列表菜单的代码编写。常见的库有jQuery、Bootstrap和React-select等。

以下是使用jQuery实现下拉列表菜单的示例代码：

HTML结构

同样的，下拉列表菜单的HTML结构通常由一个<select>标签和多个<option>标签组成。

<select id="select-menu">
  <option value="">请选择一个选项</option>
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橘子</option>
</select>

jQuery代码

控制菜单的样式

首先，需要使用jQuery选择器获取select元素，

const selectMenu = $('#select-menu');

然后，需要使用CSS设置下拉菜单的样式，

selectMenu.selectmenu();

该方法会将select元素转变为下拉菜单。仅此一行代码就可以生成基本下拉菜单。如果想要添加选项之间的分割线，可以使用以下代码：

selectMenu.selectmenu({
  create: function(event, ui){
    $(this).find(".ui-selectmenu-menu").addClass("ui-menu-icons");
  }
});

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>使用jQuery实现下拉列表菜单示例</title>
    <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
    <link href="//code.jquery.com/ui/1.12.1/themes/base/menu-icons.css" rel="stylesheet">
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      $(function() {
        const selectMenu = $('#select-menu');
        selectMenu.selectmenu({
          create: function(event, ui) {
            $(this).find('.ui-selectmenu-menu').addClass('ui-menu-icons');
          }
        });
      });
    </script>
  </head>

  <body>
    <select id="select-menu">
      <option value="">请选择一个选项</option>
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="orange">橘子</option>
    </select>
  </body>
</html>

以上就是JavaScript下拉列表菜单的两种实现方法，纯JavaScript和使用第三方库实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript下拉列表菜单的实现方法 - Python技术站

javascript下拉列表菜单的实现方法

纯JavaScript实现

HTML结构

JavaScript代码

获取select元素

给select元素绑定事件

控制选项的显隐

使用第三方库实现

HTML结构

jQuery代码

控制菜单的样式

相关文章