jQuery select三级联动

三级联动通常指的是通过选择第一个下拉菜单的值来填充第二个下拉菜单，选择第二个下拉菜单的值来填充第三个下拉菜单的数据。以下是一个简单的jQuery实现：

HTML部分：

<select id="first-level">
    <option value="">请选择</option>
    <option value="province">省份</option>
</select>
 
<select id="second-level">
    <option value="">请选择省份</option>
</select>
 
<select id="third-level">
    <option value="">请选择城市</option>
</select>

JavaScript部分（jQuery）:

$(document).ready(function() {
    var cities = {
        'province': {
            'city1': ['区域1', '区域2'],
            'city2': ['区域A', '区域B']
        }
    };
 
    $('#first-level').change(function() {
        var firstLevelVal = $(this).val();
        var $secondLevel = $('#second-level');
        $secondLevel.find('option:not(:first)').remove();
        $.each(cities[firstLevelVal], function(key, value) {
            $secondLevel.append($('<option>').text(key).attr('value', key));
        });
    });
 
    $('#second-level').change(function() {
        var secondLevelVal = $(this).val();
        var $thirdLevel = $('#third-level');
        $thirdLevel.find('option:not(:first)').remove();
        $.each(cities[$('#first-level').val()][secondLevelVal], function(index, value) {
            $thirdLevel.append($('<option>').text(value).attr('value', value));
        });
    });
});

在这个例子中，我们定义了一个cities对象来模拟数据库中的数据结构。当第一个下拉菜单的值改变时，通过jQuery的.change()事件处理函数更新第二个下拉菜单的选项。同理，当第二个下拉菜单的值改变时，更新第三个下拉菜单的选项。这里使用了.append()方法来添加新的<option>元素。