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

Question

我有一个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);
});
}
});

Answer 1

如果您正在尝试，假设从下拉中选择四月

你可以运行这个

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

Answer 2

首先，您决不能使用同一个id两次。在你的循环中，你正在创建多个具有相同id的选择。这会阻止你以后访问它们。

$.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) {
let id = 0; <--- create unique id
$.each(data.respData, function(key, value) {
var salesTargetId = value.salesTargetId.trim();
var actionSelect = '<select id="Action_'+id+'"> <option value="Update">Update</option> <option value="Delete">Delete</option> </select>';
var month ='<select id="updateMonth_'+id+'">'+
'<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_'+id).val(value.month.substr(0,3)); <---Now you can access it here
id++;
});
}
});