Question

我有两个下拉列表，其中第二个（#second）依赖于第一个下拉列表（#first）。每次#first更改时，都会向服务器发出请求以获取＃second的选项。

当我手动选择#first的值没有问题时，问题是当我使用jQuery填充表单的数据时。我将json的数据分配给相应的表单控件。当我将值赋给#first然后我使用$（“＃first”）。触发器（'change'）然后我尝试在加载选项后将值赋给#second。

似乎jQuery尝试在加载选项之前将值赋给#second。

HTML：

<div class="form-group">
    <div class="row">
        <label for="desCa" class="control-label col-md-2">DES</label>
        <div class="col-md-4">
            <select name="desCa" id="first" class="form-control">
                <option value="">Seleccione</option>
                <!-- Incluir catálogo de DES -->
                <?php $des=c atalogos( "des"); foreach($des as $des) { echo '<option value="'.$des[ 'idDes']. '">'.$des[ 'descripcion']. '</option>'; } ?>
            </select>
        </div>
    </div>
</div>

<div class="form-group">
    <div class="row">
        <label for="entidadCa" class="control-label col-md-2">Entidad</label>
        <div class="col-md-4">
            <select name="entidadCa" id="second" class="form-control">
                <option value="">Seleccione una DES</option>
                <!-- Incluir catálogo de Entidades -->
            </select>
        </div>
    </div>
</div>

当#first改变时：

$("#first").on('change', function(){
    var des = $(this).val();
    var get_dependencias = $.get(base_url+'dsac/catalogos.php', {cat: 'dependencias', des: des});
    get_dependencias.done(function(dependencias){
        if (dependencias.length > 0) {
            $("#second").empty();
        $.each(dependencias, function(key, dependencia){
            $("#second").append('<option value="'+ dependencia['id'] + '">' + dependencia['descripcion'] + '</option>');
        });
        } else {
            $("#second").html('<option value="-1">Seleccione una DES</option>');
        }
    });
});

问题出在哪里：

$.post(base_url+'dsac/cuerpoacademico/buscar.php', {clave: clave})
   .done(function(xhr){
       var data = $.parseJSON(xhr);
       if(data.msgID === 1){
           alert(data.msg);
       } else {
           llenarFormCA(data);
       }
   });

    function llenarFormCA(data){ //data is in JSON format

        var pane2 = '#pane2';
        //Here a #first option is selected so I trigger change event in order to load #second options.
        $(pane2 + " #first").val(data.campo5).trigger('change');

        //Altough #second options are loaded, always the first option is selected, not the one that data.campo6 says.
        $(pane2 + " #second").val(data.campo6);
    }

我真的很感激任何帮助。感谢。

如何使用jQuery和JSON填充依赖的下拉列表？

0 个答案: