jQuery分类联动菜单选择器代码

原创

mob649e8157aaee 2024-11-09 04:35:30 ©著作权

文章标签 选择器下拉菜单 jQuery 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8157aaee的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery分类联动菜单选择器的实现与应用

在现代网页开发中，用户友好的界面是提升用户体验的关键之一。分类联动菜单选择器是一种常见的UI组件，能够根据用户的选择动态更新下拉菜单的内容。本文将介绍如何使用 jQuery 实现一个简单的分类联动菜单选择器，并给出相关代码示例。

什么是分类联动菜单选择器？

分类联动菜单选择器 是一种下拉菜单，其内容会随着用户的选择而动态变化。比如，在一个选择“国家”的菜单中，用户选择了“美国”后，接下来的“城市”菜单就会显示出所有与美国相关的城市。这种方式不仅提高了界面的整洁性，还能极大地方便用户快速找到所需的信息。

实现步骤

下面我们将通过 jQuery 来实现这样的一个联动菜单选择器。我们将以选择国家和城市为例进行说明。

HTML结构

首先，我们需要设置一个基本的 HTML 结构。我们将创建两个下拉菜单，一个用于选择国家，一个用于选择城市。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联动菜单示例</title>
    <script src="
</head>
<body>
    <label for="country">国家：</label>
    <select id="country">
        <option value="">请选择国家</option>
        <option value="us">美国</option>
        <option value="cn">中国</option>
    </select>

    <label for="city">城市：</label>
    <select id="city">
        <option value="">请选择城市</option>
    </select>

    <script src="script.js"></script>
</body>
</html>

jQuery代码

接下来，我们需要编写 jQuery 代码，以实现联动的效果。当用户选择了某个国家，城市下拉框将根据选择的国家进行更新。

创建名为 script.js 的 JavaScript 文件，并在其中添加以下代码：

$(document).ready(function() {
    const cities = {
        us: ['纽约', '洛杉矶', '芝加哥'],
        cn: ['北京', '上海', '广州']
    };

    $('#country').change(function() {
        let country = $(this).val();
        $('#city').empty(); // 清空城市下拉菜单
        $('#city').append('<option value="">请选择城市</option>'); // 添加默认选项

        if (country in cities) {
            // 有对应的城市
            cities[country].forEach(function(city) {
                $('#city').append(`<option value="${city}">${city}</option>`);
            });
        }
    });
});