jquery 无限自定义下拉联动

实现无限自定义下拉联动需要借助jQuery和Ajax技术。

首先，需要在HTML中定义下拉框元素及其关联关系。例如：

<select id="select1">
    <option value="">请选择</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
</select>
<select id="select2" disabled>
    <option value="">请选择</option>
</select>
<select id="select3" disabled>
    <option value="">请选择</option>
</select>

其中，select1为第一个下拉框，select2和select3为第二和第三个下拉框，都设置为disabled禁用状态。

接下来，需要编写jQuery代码，通过监听select1的change事件，触发Ajax请求，获取下一级下拉框的数据并填充到select2中。例如：

$('#select1').on('change', function() {
    var parentId = $(this).val();
    if (parentId) {
        $.ajax({
            url: '/api/select2',
            data: {parentId: parentId},
            success: function(data) {
                var options = '<option value="">请选择</option>';
                data.forEach(function(item) {
                    options += '<option value="' + item.id + '">' + item.name + '</option>';
                });
                $('#select2').html(options).prop('disabled', false);
            },
            error: function() {
                $('#select2').html('<option value="">请选择</option>').prop('disabled', true);
            }
        });
    } else {
        $('#select2, #select3').html('<option value="">请选择</option>').prop('disabled', true);
    }
});

其中，url为请求数据的接口地址，parentId为上级下拉框选中的值。请求成功后，通过遍历数据拼接元素，并将其填充到select2中，并设置为启用状态。如果请求失败，则将select2设置为禁用状态。如果select1选中的值为空，则将select2和select3都设置为禁用状态，并清空其选项。

同样的，通过监听select2的change事件，再次触发Ajax请求，获取下一级下拉框的数据并填充到select3中。例如：

$('#select2').on('change', function() {
    var parentId = $(this).val();
    if (parentId) {
        $.ajax({
            url: '/api/select3',
            data: {parentId: parentId},
            success: function(data) {
                var options = '<option value="">请选择</option>';
                data.forEach(function(item) {
                    options += '<option value="' + item.id + '">' + item.name + '</option>';
                });
                $('#select3').html(options).prop('disabled', false);
            },
            error: function() {
                $('#select3').html('<option value="">请选择</option>').prop('disabled', true);
            }
        });
    } else {
        $('#select3').html('<option value="">请选择</option>').prop('disabled', true);
    }
});

同样的，url为请求数据的接口地址，parentId为上级下拉框选中的值。请求成功后，通过遍历数据拼接元素，并将其填充到select3中，并设置为启用状态。如果请求失败，则将select3设置为禁用状态。如果select2选中的值为空，则将select3设置为禁用状态，并清空其选项。

最后，需要编写服务器端的接口代码，根据请求参数返回对应的数据。例如：

app.get('/api/select2', function(req, res) {
    var parentId = req.query.parentId;
    var data = [];
    if (parentId == 1) {
        data = [
            {id: 1, name: '选项2-1'},
            {id: 2, name: '选项2-2'}
        ];
    } else if (parentId == 2) {
        data = [
            {id: 3, name: '选项2-3'},
            {id: 4, name: '选项2-4'}
        ];
    }
    res.send(data);
});

app.get('/api/select3', function(req, res) {
    var parentId = req.query.parentId;
    var data = [];
    if (parentId == 1) {
        data = [
            {id: 1, name: '选项3-1'},
            {id: 2, name: '选项3-2'}
        ];
    } else if (parentId == 2) {
        data = [
            {id: 3, name: '选项3-3'},
            {id: 4, name: '选项3-4'}
        ];
    }
    res.send(data);
});

其中，根据parentId返回对应的数据。这里为了简化示例，直接在代码中写死数据，实际应用中需要从数据库或其他数据源中读取数据。

通过以上步骤，就可以实现无限自定义下拉联动了