当前位置：首页 > news >正文

基于 jQuery 实现二级下拉框选择功能

news 2025/7/12 20:48:53

在 Web 开发中，下拉框是一种常见的交互组件，而二级下拉框能够提供更丰富的选项结构，增强用户体验。本文将详细介绍如何使用 jQuery 实现一个二级下拉框选择功能，同时处理请求数据、展示列表、处理鼠标交互和点击事件等。

1. 项目概述

我们要实现一个二级下拉框，用户点击输入框后显示父级选项列表，鼠标悬停在父级选项上时显示对应的子集选项列表，用户可以点击父级或子集选项将选项名称填写到输入框中。同时，点击页面其他区域可隐藏下拉框，并且鼠标悬停在选项上时会有变色效果。

项目效果：

2. 代码实现

HTML 结构

首先是 HTML 部分，它定义了输入框和下拉框的基本结构：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="./css/二级下拉框.css" />
        <script src="./js/jquery-3.7.1.min.js"></script>
    </head>
    <body>
        <div class="center">
            <input type="text" placeholder="请选择行业" readonly class="selectInput" />
            <div class="content">
                <ul class="parentContent"></ul>
                <ul class="childContent"></ul>
            </div>
        </div>
        <script src="js/二级下拉框.js"></script>
    </body>
</html>

输入框：<input> 元素用于显示用户最终选择的选项名称，设置 readonly 属性可防止用户手动输入，确保选择的准确性。
下拉框容器：<div class="content"> 作为下拉框的整体容器，包含两个无序列表。
选项列表：<ul class="parentContent"></ul> 和 <ul class="childContent"></ul> 分别用于展示父级选项和子集选项。

3.2 JavaScript 逻辑实现

3.2.1 数据请求与父级选项渲染

$.ajax({
    type: 'post',
    url: `http://bas.zuniquex.cn/webapi/trade/index`,
    data: {},
    success: function(results) {
        console.log(results);
        let parentStr = '';
        for (let i = 0; i < results.data.length; i++) {
            parentStr += `
                <li data-index="${i}" data-name="${results.data[i].name}">
                    ${results.data[i].name}
                </li>
            `;
        }
        $('.parentContent').html(parentStr);
    },
    error: function(error) {
        console.error('请求出错:', error);
    }
});

请求方式与 URL：使用 $.ajax 方法发送 POST 请求到指定的 URL，以获取父级和子集选项的数据。
成功处理：在请求成功后，通过循环遍历 results.data 数组，将每个父级选项的名称和索引信息动态生成 HTML 字符串 parentStr，并使用 html() 方法将其插入到 parentContent 列表中。
错误处理：若请求出错，使用 console.error 输出错误信息，方便调试。

3.2.2 鼠标悬停与子集选项显示

// 鼠标悬停父级的hover
$('.content').hover(
    function() {
        // 鼠标悬停在容器上时，保持子集显示
        $('.childContent').show();
    },
    function() {
        // 鼠标移出容器时，隐藏子集
        // $('.childContent').hide();
    }
);

// 为父级元素添加鼠标悬浮事件，显示子集
$('.parentContent li').mouseenter(function() {
    let index = $(this).data('index');
    let children = results.data[index].children;
    let childStr = '';
    if (children.length > 0) {
        // 有子集的话
        for (let j = 0; j < children.length; j++) {
            childStr += `
                <li>
                    ${children[j].name}
                </li>
            `;
        }
    } else {
        // 没子集的话
        childStr = '<li>暂无</li>';
    }
    $('.childContent').html(childStr).show();
});

容器悬停事件：使用 hover() 方法为 .content 容器绑定鼠标悬停和移出事件。当鼠标悬停在容器上时，显示子集选项列表。
父级选项悬停事件：使用 mouseenter() 方法为每个父级选项绑定鼠标悬停事件。当鼠标悬停在某个父级选项上时，根据该选项的 data-index 属性获取对应的子集选项数据，动态生成 HTML 字符串 childStr，并将其插入到 childContent 列表中，然后显示该列表。

3.2.3 选项点击事件处理

// 为父级和子集元素添加点击事件 （点击选项，填写到input框中）
$(document).on('click', '.parentContent li, .childContent li', function() {
    // .trim()去除空格
    let selectedName = $(this).text().trim();
    if (selectedName !== '暂无') {
        $('.selectInput').val(selectedName);
    }
    $('.content').hide();
    console.log($('.selectInput').val());
});

使用 on() 方法为父级和子集选项绑定点击事件。当用户点击某个选项时，获取该选项的文本内容并去除首尾空格，若选项名称不为 “暂无”，则将其赋值给输入框的 value 属性，同时隐藏下拉框，并在控制台输出选择的选项名称。

3.2.4 输入框与页面点击事件处理

// 点击输入框，显示列表
$('.selectInput').on('click', function(e) {
    $('.content').show();
    $('.parentContent').show();
});

// 点击页面其他区域隐藏 下拉框
$(document).on('click', function(e) {
    if (!$(e.target).closest('.selectInput, .parentContent, .childContent').length) {
        $('.parentContent').hide();
        $('.childContent').hide();
        $('.content').hide();
    }
});

输入框点击事件：使用 on() 方法为输入框绑定点击事件，当用户点击输入框时，显示下拉框和父级选项列表。
页面点击事件：使用 on() 方法为整个文档绑定点击事件，通过 closest() 方法判断点击的元素是否在输入框、父级选项列表或子集选项列表内，若不在，则隐藏下拉框。

3.2.5 鼠标移入移出变色效果封装

// 封装后的鼠标移入移出变色效果
function setupHoverEffect(selector) {
    $(document).on('mouseenter', selector, function() {
        $(this).css({
            'background-color': '#e0e0e0',
            'font-weight': '600'
        });
    }).on('mouseleave', selector, function() {
        $(this).css({
            'background-color': '',
            'font-weight': ''
        });
    });
}

// 同时为父级和子集元素添加鼠标悬浮和移出事件
setupHoverEffect('.parentContent li, .childContent li');

封装 setupHoverEffect 函数，用于为指定的元素绑定鼠标移入和移出事件。当鼠标移入时，改变元素的背景颜色和字体粗细；当鼠标移出时，恢复默认样式。通过调用该函数，为父级和子集选项添加鼠标悬浮和移出效果。

4. 代码优化与拓展建议

数据缓存：为避免重复请求相同的数据，可以在本地缓存请求结果，下次使用时直接从缓存中获取。
样式优化：可以进一步优化下拉框的样式，如添加动画效果、调整字体和颜色等，以提升用户体验。
错误处理增强：在请求出错时，可以给用户更友好的提示信息，而不仅仅是在控制台输出错误。

5. 总结

通过上述详细的代码实现和分析，我们成功地利用 jQuery 实现了一个功能完善的二级下拉框选择功能。这种实现方式充分发挥了 jQuery 的优势，简化了 DOM 操作和事件处理，提高了开发效率。同时，通过封装鼠标移入移出变色效果的函数，提高了代码的可维护性和复用性。在实际项目中，开发者可以根据具体需求灵活修改请求的 URL 和数据格式，以及调整样式和交互逻辑，以满足不同的业务场景。希望本文能为你在 Web 开发中实现类似的二级下拉框功能提供有益的参考。

查看全文

http://www.dtcms.com/a/111995.html