Question

我有三个链式select元素。第一个是PHP填充MySQL查询和获取对象。第二个是根据第一次选择填充change事件。请参阅以下代码：

$('.form-horizontal').on('change', '#proyectos', function(){
    var id = $('#proyectos').val();

    var request = $.ajax({
        type: 'GET',
        url: "{{ path('centros') }}",
        dataType:'json',
        data: 'id=' + id,
        success: function(data) {
            var html = "";
            $.each(data, function(index, value){
                html += '<option value="'+ index + '">' + value + '</option>';
                $("#centros").html(html);
            });
        },
        error: function() {
            request.abort();
        }
    });
});

第三个是根据第二个change值填充的，如下所示：

$('.form-horizontal').on('change', '#centros', function(){
    var id = $('#centros').val();

    var request = $.ajax({
        type: 'GET',
        url: "{{ path('unidades') }}",
        dataType:'json',
        data: 'id=' + id,
        success: function(data) {
            var html = "";
            $.each(data, function(index, value){
                html += '<option value="'+ index + '">' + value + '</option>';
                $("#unidades").html(html);
            });
        },
        error: function() {
            request.abort();
        }
    });
});

如果第一个和第二个有多个值，我的代码可以正常工作，但是如果第一个select只有一个option那么我的代码就会停止工作，因为永远不会执行change事件。我如何在我的代码上修复此问题？

Answer 1

你可以像这样在ajax的成功事件上触发事件：

if(data.length == 1) $(element).change()

Answer 2

按照@Steve建议我稍微更改了我的代码，现在它可以工作了，这是解决方案：

$(function(){
    $('.form-horizontal').on('change', '#proyectos', function(){
        var id = $('#proyectos').val();

        var request = $.ajax({
            type: 'GET',
            url: "{{ path('centros') }}",
            dataType:'json',
            data: 'id=' + id,
            success: function(data) {
                var html = "<option>---Seleccione una opción---</option>";
                $.each(data, function(index, value){
                    html += '<option value="'+ index + '">' + value + '</option>';
                    $("#centros").html(html);
                });
            },
            error: function() {
                request.abort();
            }
        });
    });

    $('.form-horizontal').on('change', '#centros', function(){
        var id = $('#centros').val();

        var request = $.ajax({
            type: 'GET',
            url: "{{ path('unidades') }}",
            dataType:'json',
            data: 'id=' + id,
            success: function(data) {
                var html = "<option>---Seleccione una opción---</option>";
                $.each(data, function(index, value){
                    html += '<option value="'+ index + '">' + value + '</option>';
                    $("#unidades").html(html);
                });
            },
            error: function() {
                request.abort();
            }
        });
    });
});

如果SELECT只有一个选项，则执行哪个事件

2 个答案: