基于jquery的二级联动菜单实现代码

下面是基于jQuery实现二级联动菜单的详细攻略。

准备工作

首先，在html文件中，需要进行以下几项准备工作：

引入jQuery库文件，可以使用CDN链接或者直接下载到本地使用；

定义两个


## 动态加载二级选项

接下来，我们需要定义一个函数，用于根据一级选项的值，动态加载对应的二级选项列表。可以采用Ajax异步请求的方式，从后台获取对应一级选项的二级选项列表数据。以下是这个函数的代码实现：

```javascript
function loadSecondOptions() {
    var firstValue = $('#firstSelect').val();   //获取一级选项的值
    $('#secondSelect').empty();   //清空原有的二级选项列表内容

    if (firstValue) {    //如果一级选项有值
        $.ajax({
            url: '/getSecond/' + firstValue,  //发送请求到后台获取对应二级选项的数据
            type: 'GET',
            success: function(secondOptions) {   //请求成功后的回调函数
                if (secondOptions && secondOptions.length > 0) {   //如果有二级选项
                    var optionsHtml = '';
                    secondOptions.forEach(function(option) {
                        optionsHtml += '<option value="' + option.value + '">' + option.name + '</option>';
                    });
                    $('#secondSelect').html(optionsHtml);
                } else {    //如果没有二级选项
                    $('#secondSelect').append('<option value="">无可选项</option>');
                }
            }
        })
    }
}

以上代码中，$.ajax() 函数用于向后台发出异步请求，获取对应一级选项的二级选项列表数据。请求成功后，根据返回的列表数据生成对应的

事件绑定

定义好以上函数后，我们还需要将它与一级下拉列表的change事件进行绑定。这样，在一级选项改变时，会自动触发函数，进而重新加载对应的二级选项列表。以下是绑定事件的代码：

function initSelect() {
    $('#firstSelect').on('change', function() {
        loadSecondOptions();
    });
}

以上代码中，$('#firstSelect').on('change', function() {...}) 将回调函数绑定到一级下拉列表的change事件上。

示例说明

下面，我会给出两个示例，用于演示如何使用上述代码实现二级联动菜单。

示例1：城市级联

在这个示例中，我们实现一个城市级联菜单，用户选择一个省份后，会动态加载该省份下的所有城市。以下是实现细节：

在html文件中，需要添加如下代码，用于定义省份和城市两个下拉列表：

<body>
    <select id="provinceSelect">
        <option value="">请选择省份</option>
        <option value="1">河北省</option>
        <option value="2">山东省</option>
    </select>
    <select id="citySelect">
        <option value="">请选择城市</option>
    </select>
</body>

在js文件中，需要定义如下两个函数：

function loadCityOptions(provinceValue) {
    $.ajax({
        url: '/getCity/' + provinceValue,
        type: 'GET',
        success: function(cityOptions) {
            if (cityOptions && cityOptions.length > 0) {
                var optionsHtml = '';
                cityOptions.forEach(function(option) {
                    optionsHtml += '<option value="' + option.value + '">' + option.name + '</option>';
                });
                $('#citySelect').html(optionsHtml);
            } else {
                $('#citySelect').append('<option value="">无可选项</option>');
            }
        }
    });
}

function initSelect() {
    $('#provinceSelect').on('change', function() {
        var provinceValue = $(this).val();     //获取省份选项的值
        loadCityOptions(provinceValue);        //根据省份选项的值，加载对应的城市选项列表
    });
}

以上代码中，loadCityOptions() 函数用于根据用户选择的省份，从后台获取对应的城市列表数据，并将它们加入到城市选项列表中；initSelect() 函数中，我们将 $('#provinceSelect') 绑定到 change 事件上，当用户选择不同的省份选项时，会自动触发该事件，进而重新加载对应的城市选项列表。

在后台，需要添加如下代码，用于处理前端的Ajax请求，返回对应的城市列表数据：

@app.route('/getCity/<province_id>', methods=['GET'])
def get_city(province_id):
    # 从数据库中获取对应省份的城市列表
    city_options = [{'value': 1, 'name': '石家庄市'}, {'value': 2, 'name': '保定市'}, ...]
    return jsonify(city_options)

将这段代码添加到后台Python文件中，在 '/getCity/<province_id>' 链接上进行请求后，会返回对应省份的城市列表信息。

示例2：电影类型级联

在这个示例中，我们实现一个电影类型级联菜单，用户选择一个电影类别后，会动态加载该类别下的所有电影。以下是实现细节：

在html文件中，需要添加如下代码，用于定义电影类型和电影两个下拉列表：

<body>
    <select id="typeSelect">
        <option value="">请选择电影类型</option>
        <option value="1">爱情片</option>
        <option value="2">动作片</option>
        <option value="3">喜剧片</option>
    </select>
    <select id="movieSelect">
        <option value="">请选择电影</option>
    </select>
</body>

在js文件中，需要定义如下两个函数：

function loadMovieOptions(typeValue) {
    $.ajax({
        url: '/getMovie/' + typeValue,
        type: 'GET',
        success: function(movieOptions) {
            if (movieOptions && movieOptions.length > 0) {
                var optionsHtml = '';
                movieOptions.forEach(function(option) {
                    optionsHtml += '<option value="' + option.value + '">' + option.name + '</option>';
                });
                $('#movieSelect').html(optionsHtml);
            } else {
                $('#movieSelect').append('<option value="">无可选项</option>');
            }
        }
    });
}

function initSelect() {
    $('#typeSelect').on('change', function() {
        var typeValue = $(this).val();
        loadMovieOptions(typeValue);
    });
}

以上代码中，loadMovieOptions() 函数用于根据用户选择的电影类型，从后台获取对应的电影列表数据，并将它们加入到电影选项列表中；initSelect() 函数中，我们将 $('#typeSelect') 绑定到 change 事件上，当用户选择不同的电影类型选项时，会自动触发该事件，进而重新加载对应的电影选项列表。

在后台，需要添加如下代码，用于处理前端的Ajax请求，返回对应电影类型的电影列表数据：

@app.route('/getMovie/<type_id>', methods=['GET'])
def get_movie(type_id):
    # 从数据库中获取对应类型的电影列表
    movie_options = [{'value': 1, 'name': '肖申克的救赎'}, {'value': 2, 'name': '霸王别姬'}, ...]
    return jsonify(movie_options)

将这段代码添加到后台Python文件中，在 '/getMovie/<type_id>' 链接上进行请求后，会返回对应类型的电影列表信息。

总结

以上就是基于jQuery实现二级联动菜单的完整攻略，通过以上步骤，我们可以轻松地实现二级联动菜单的功能，并适用于多种场景的应用。希望能对你有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jquery的二级联动菜单实现代码 - Python技术站