Question

我有一个HTML页面，有四个选择框。当我的页面加载时，我想用数据填充它们（使用AJAX）。直到这里它没关系。

问题在于我想在每一个中显示所选择的值。比方说，我TABLE_A column ID_Name，TABLE_B拥有所有名称。我可以使用所有名称填充所选的选择，但我无法自动显示所选的ID_Name。

选择的其他人也一样。我试图将ID_Name分配给变量，但它不起作用，因为我不知道其中一个AJAX脚本是先加载的。有时它首先填充选定的元素并在之后获得ID，但有时它会反过来。我怎么能避免这个？

到目前为止我的脚本::

<script>
    jQuery(document).ready(function() {  

        var id_contacto = 0;
        var recebido_por = 0;
        var responder_por = 0;

        // Get general Data
        $.ajax({
            url: 'php/c_consultas.php?tipo_acao=consulta_detalhes_consulta&id_consulta='+getUrlVars()['id_consulta'],
            type: 'post',
            data: { tag: 'getData'},
            dataType: 'json',
                success: function (data) {
                    if (data.success) {
                        $.each(data, function (index, record) {                            
                            if ($.isNumeric(index)) { 
                                $('#cliente').val(record.cliente_nome).show();
                                id_contacto = record.id_contacto;
                                $('#ref_consulta').val(record.referenciaconsulta).show();
                                $('#titulo').val(record.tituloconsulta).show();
                                recebido_por = record.recebido_por;
                                responder_por = record.responder_por;
                                $('#consulta_notas').val(record.notas_consulta).show();
                            }
                    })
                }
            }
        });            


        // Get List of type of comunication (received by)
        $.ajax({
                url: 'php/listagens.php?tipo_lista=recebido_por',
                type: 'post',
                data: { tag: 'getData'},
                dataType: 'json',
                    success: function (data) {
                    $('#recebido_por').empty();
                    $('#recebido_por').append($("<option />").val('').text("Selecione uma opção...").attr('disabled','disabled').attr('style','display:none;'));
                        if (data.success) {
                            $.each(data, function (index, record) {                            
                                if ($.isNumeric(index))                                     

                                    if (record.ID == recebido_por){
                                        $('#recebido_por').append($("<option selected='selected'/>").val(record.ID).text(record.meio_comunicacao));
                                    } else {
                                        $('#recebido_por').append($("<option />").val(record.ID).text(record.meio_comunicacao));
                                    }
                            });
                            $('#recebido_por').trigger("liszt:updated");
                        }
                    }
            });            

        // Get type of comunication, again... (respond by)
        $.ajax({
                url: 'php/listagens.php?tipo_lista=recebido_por',
                type: 'post',
                data: { tag: 'getData'},
                dataType: 'json',
                    success: function (data) {
                    $('#responder_por').empty();
                    $('#responder_por').append($("<option />").val('').text("Selecione uma opção...").attr('disabled','disabled').attr('style','display:none;'));
                        if (data.success) {
                            $.each(data, function (index, record) {                            
                                if ($.isNumeric(index))                                     

                                    if (record.ID == responder_por){
                                        $('#responder_por').append($("<option selected='selected'/>").val(record.ID).text(record.meio_comunicacao));
                                    } else {
                                        $('#responder_por').append($("<option />").val(record.ID).text(record.meio_comunicacao));
                                    }
                            });
                            $('#responder_por').trigger("liszt:updated");
                        }
                    }
            });            




        //List of Internal contacts
        $.ajax({
                url: 'php/c_consultas.php?tipo_acao=listagem_contactos_internos&id_consulta='+getUrlVars()['id_consulta'],
                type: 'post',
                data: { tag: 'getData'},
                dataType: 'json',
                success: function (data) {
                    $('#contacto').empty();
                    $('#contacto').append($("<option />").val('').text("Selecione um contacto...").attr('disabled','disabled').attr('style','display:none;'));

                    if (data.success) {
                        var linha = "";
                        $.each(data, function (index, record) {
                            if ($.isNumeric(index)) { 
                                if (this.ID == id_contacto){
                                    $('#contacto').append($("<option selected='selected'/>").val(this.ID).text(this.nome));
                                } else {
                                    $('#contacto').append($("<option />").val(this.ID).text(this.nome));
                                }
                            }
                        })

                        $('#contacto').trigger("liszt:updated");
                    }
                }
            });            
}); // FIM Document(ready).
</script>

Answer 1

最简单的方法（在我看来）是在一次AJAX调用中将所有内容传递回客户端。将JSON对象定义为以下多行（在本例中为4）：id，管道分隔的选择列表值字符串（listString），currentValue。在Success分支上，解析json对象，拆分管道分隔的字符串，根据controlID加载选项，并在将选项列表附加到选择列表后设置值。

if ('setSels' in serverResponse) {
        var setSel = serverResponse.setSels;
        wklen = setSel.length;
        var optVal = '';
        var valList;
        var j;
        for (i = 0; i < wklen; i++) {
            wkEl = jQuery('#' + setSel[i].id);
            if (wkEl.length) {
                valList = setSel[i].listString.split("|");
                optVal = '<option value=""></option>';
                for (j = 0; j < valList.length; j++) {
                    optVal += '<option value="' + valList[j] + '">' + valList[j] + '</option>';
                }
                jQuery(wkEl).html(optVal).val(setSel[i].currentValue);
            }
            else {
                alert('cannot find ' + setSel[i].id);
            }
        }
    }

Answer 2

我使用回调做了完全相同的事情，没有时间完全解释但是接下来是代码所以你应该能够弄明白。

function CascadeDropDowns(parentClass, childClass, action, callback) {
  var DropDownId = $(parentClass + " option:selected").val();

  $.ajax({
    url: "/Terminals_configuration/" + action,
    data: { DropDownId: DropDownId },
    dataType: "json",
    type: "POST",
    error: function () {
      alert("An error occurred.");
    },
    success: function (data) {
      var items = "";
      $.each(data, function (i, item) {
        items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
      });
      $(childClass).html(items);
      $(childClass)[0].selectedIndex = 0;
      if (callback) callback();
    }
  });
}

$(document).ready(function () {
  // Populates all child drop downs on load
  var callback = function () {
    CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters");
  };

  CascadeDropDowns(".DeviceTypeDDL", ".ConfigGroupDDL", "GetGroups", callback);

  // Populates all child drop downs parent change
  $(".DeviceTypeDDL").change(function () {
    var callback = function () {
      CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters");
    };
    CascadeDropDowns(".DeviceTypeDDL", ".ConfigGroupDDL", "GetGroups", callback);
  });
  $(".ConfigGroupDDL").change(function () {
    CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters");
  });

  $(".MergeDeleteDDL").change(function () {
    if ($(this).val() == 0) {
      $("#ConfigValue").val("DELETE");
    }
    else {
      $("#ConfigValue").val("");
    }
  });

使用ajax填充选择框。更好的方式

2 个答案: