0

我有一个包含四个选择框的 HTML 页面。当我的页面加载时，我想用数据填充它们（使用 AJAX）。到这里为止还好。

问题是我想在每一个中显示选择的值。比方说，我有TABLE_Awithcolumn ID_Name和 theTABLE_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>
4

2 回答 2

2

最简洁的方法（在我看来）是在单个 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);
            }
        }
    }
于 2013-04-19T14:16:31.567 回答
0

我使用回调做了完全相同的事情，没有时间完全解释，但这里有代码，所以你应该能够弄清楚。

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("");
    }
  });
于 2013-04-19T13:46:16.083 回答