Question

此代码可以从数据库中获取数据，然后将其返回到选择选项：

$(document).on('click', '.renew', function() {
  var user_id3 = $(this).attr("id");
  $.ajax({
    url: "../controller/fetch_single.php",
    method: "POST",
    data: {
      user_id3: user_id3
    },
    dataType: "json",
    success: function(data) {
      $('#bus_type').html(data.type);
    }
  })
});

AJAX成功并返回JSON，但select选项仍然返回空白而不是来自AJAX的数据。我做错了什么？

data的输出示例：

{
    "id":"575",
    "bus_name":"THIS LOVE",
    "type":"RERE",
    "address":"SDF"
}

Answer 1

$(document).on('click', '.renew', function() {
    var user_id3 = $(this).attr("id");
    $.ajax({
        url: "../controller/fetch_single.php",
        method: "POST",
        data: {
            user_id3: user_id3
        },
        dataType: "json",
        success: function(data) {
            // If the option is in the select
            $('#bus_type').find('option[value="'+data.id+'"]').prop('selected', true);

            // Or if the option is not there yet
            var $option = $('<option></option>').html(data.type).attr('value', data.id).prop('selected', true);
            $('#bus_type').append($option); // Adds the new option as last option
            $('#bus_type').prepend($option); // Adds the new option as first option
        }
    })
});

Answer 2

假设您的HTML是：

<select id="bus_type">
    <!-- no content yet -->
</select>

你的回答是：

{
    "id":"575",
    "bus_name":"THIS LOVE",
    "type":"RERE",
    "address":"SDF"
}

然后您的success()方法会打印以下内容：

<select id="bus_type">
    RERE
</select>

这不是<select>的有效HTML。

您的JS应该看起来像这样才能工作：

$(document).on('click', '.renew', function() {
  var user_id3 = $(this).attr("id");
  $.ajax({
    url: "../controller/fetch_single.php",
    method: "POST",
    data: {
      user_id3: user_id3
    },
    dataType: "json",
    success: function(data) {
      $('#bus_type').html("<option value='"+ data.type +"'>"+ data.type +"</option>");
    }
  })
});

或者如果您想保留现有选项：

$(document).on('click', '.renew', function() {
  var user_id3 = $(this).attr("id");
  $.ajax({
    url: "../controller/fetch_single.php",
    method: "POST",
    data: {
      user_id3: user_id3
    },
    dataType: "json",
    success: function(data) {
      $('#bus_type').append("<option value='"+ data.type +"'>"+ data.type +"</option>");
    }
  })
});

success()方法将打印以下内容：

<select id="bus_type">
    <option value="RERE">RERE</option>
</select>

如果您要向我们提供一些HTML，我可以根据您的具体需求编辑我的答案。

使用AJAX响应更新选择选项

2 个答案: