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

我有一个三链

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();
        }
    });
});

---

如果first和second有多个值，则我的代码工作正常，但如果first select只有一个

选项

，则我的代码停止工作，因为

更改

事件从未执行。如何在代码中解决此问题？

您可以在ajax的成功事件中触发如下事件：

---

if（data.length==1）$（element）.change（）

根据@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();
            }
        });
    });
});

$（函数（）{
$（'.form horizontal'）.on（'change'，'proyectos'，function（）{
var id=$（'#proyectos'）.val（）；
var请求=$.ajax({
键入：“GET”，
url:“{path（'centros'）}}”，
数据类型：'json'，
数据：“id=”+id，
成功：功能（数据）{
var html=“--Seleccione una opción----”；
$.each（数据、函数（索引、值）{
html+=''+值+''；
$（“#centros”）.html（html）；
});
},
错误：函数（）{
request.abort（）；
}
});
});
$（'.form horizontal'）。on（'change'，'centros'，function（）{
var id=$（'#centros'）.val（）；
var请求=$.ajax({
键入：“GET”，
url:“{path（'unidades'）}}”，
数据类型：'json'，
数据：“id=”+id，
成功：功能（数据）{
var html=“--Seleccione una opción----”；
$.each（数据、函数（索引、值）{
html+=''+值+''；
$（“#unidades”）.html（html）；
});
},
错误：函数（）{
request.abort（）；
}
});
});
});

我认为这更像是一个实施问题。。。您应该始终至少有两个选项（一个默认的虚拟“选择一个选项”和一个实际值），或者您需要确保在服务器端选择每个选项的第一个选项。要继续我之前的评论：您当前如何确保在页面加载时选择了选择2的选项1？如果只有一个选项，这是选中的，您必须执行更改功能以显示下一个选择。通常您应该使用占位符选项（即“请选择”）@Steve，因为我将所有代码包装在

$（function（）{//code here}）中当页面loads@PHPglue这是一个细枝句子及其翻译成Symfony2项目的完整URL
$(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();
            }
        });
    });
});