时间戳

首页 > 解决方案 > 无法在选择下拉列表中填充来自 ajax 的选定响应

jquery - 无法在选择下拉列表中填充来自 ajax 的选定响应

问题描述

我有一个json响应如下：

{
  "respData": [
    {
      "salesTargetId": "c51a411e-44ed-496c-85c0-52d76bd97c64",
      "userId": "5f32aa84-c9e7-4c27-a292-0f06ffe07b82",
      "type": "SALES",
      "month": "April",
      "year": "2021",
      "target": 1550,
      "actual": 500,
      "createdBy": "5f32aa84-c9e7-4c27-a292-0f06ffe07b82",
      "createdDate": "2021-05-06 15:51:41",
      "brand": "Cipla",
      "status": "ACTIVE"
    },
    {
      "salesTargetId": "d2053e0a-c0b4-4adf-bf98-05789cb8f72f",
      "userId": "5f32aa84-c9e7-4c27-a292-0f06ffe07b82",
      "type": "SALES",
      "month": "April",
      "year": "2021",
      "target": 3000,
      "actual": 1000,
      "createdBy": "5f32aa84-c9e7-4c27-a292-0f06ffe07b82",
      "createdDate": "2021-05-06 16:07:41",
      "brand": "Glaxo",
      "status": "ACTIVE"
    }
  ]
}

我正在尝试按照以下代码将这些数据填充到表格中，但无法为月份下拉列表添加“selected=selected”，请帮忙

$.ajax({
                  type: "GET",
                  url: "updateDistributionData",
                  data: {
                    userId: userid
                  },
                  dataType: 'json',
                  //if received a response from the server <button type="button" class="delete-row">Delete Row</button>
                  success: function(data) {
                    $.each(data.respData, function(key, value) {
                        var salesTargetId = value.salesTargetId.trim();
                        var actionSelect = '<select id="Action"> <option value="Update">Update</option> <option value="Delete">Delete</option> </select>';
                        var month ='<select id="updateMonth">'+
                        '<option value="Jan">January</option><option value="Feb">February</option><option value="Mar">March</option><option value="Apr">April</option>' +
                        '<option value="May">May</option><option value="Jun">June</option><option value="Jul">July</option><option value="Aug">August</option>'+
                        '<option value="Sep">September</option><option value="Oct">October</option><option value="Nov">November</option><option value="Dec">December</option></select>';
                        
                        
                        
                        
                      var html = '<tr>' +
                        '<td><input type="hidden" name=delete-item id="'+salesTargetId+'" value="'+salesTargetId+'"/>'+actionSelect+'</td>' +
                        '<td><input type="text" value="' + value.year + '"/></td>' +
                        '<td>'+month'</td>' +
                        '<td><input type="text" value="' + value.brand + '"/></td>' +
                        '<td><input type="text" value="' + value.target + '"/></td>' +
                        '<td><input type="text" value="' + value.actual + '"/></td>' +
                        '</tr>';

                      $('#update-distribution tr').first().after(html);
                    });
                  }
                });

标签： jqueryajax

解决方案

如果您正在尝试让我们说从下拉列表中选择四月

你可以运行这个

    let m = 'April';
  let shorter = m.substr(0, 3);
  console.log(shorter);
  
  $('#selector').val(shorter);

您也可以在下拉列表中执行 if/else ，但这会更长。

在你的情况下

$.each(data.respData, function(key, value) {
    var salesTargetId = value.salesTargetId.trim();
    var actionSelect = '<select id="Action"> <option value="Update">Update</option> <option value="Delete">Delete</option> </select>';
    var month ='<select class="updateMonth" data-key="' + key + '">'+
    '<option value="Jan">January</option><option value="Feb">February</option><option value="Mar">March</option><option value="Apr">April</option>' +
    '<option value="May">May</option><option value="Jun">June</option><option value="Jul">July</option><option value="Aug">August</option>'+
    '<option value="Sep">September</option><option value="Oct">October</option><option value="Nov">November</option><option value="Dec">December</option></select>';




    var html = '<tr>' +
    '<td><input type="hidden" name=delete-item id="'+salesTargetId+'" value="'+salesTargetId+'"/>'+actionSelect+'</td>' +
    '<td><input type="text" value="' + value.year + '"/></td>' +
    '<td>'+month+'</td>' +
    '<td><input type="text" value="' + value.brand + '"/></td>' +
    '<td><input type="text" value="' + value.target + '"/></td>' +
    '<td><input type="text" value="' + value.actual + '"/></td>' +
    '</tr>';

    $('#update-distribution tr').first().after(html);
    
    $('.updateMonth[data-key="' + key + '"]').val(value.month.substr(0,3))
});

推荐阅读