javascript - 如何使用 jQuery 提取作为 AJAX 响应接收到的 JSON 数据并将其添加到 HTML 选择下拉列表中？

Question

我有以下 HTML 代码:

<select id="student" name="student" class="form-control"></select>

我为将选项添加到上述 HTML 选择控件而编写的 jQuery-AJAX 函数如下:

var mod_url = $('#mod_url').val(); 
$.ajax({
      url : mod_url,
      cache: false,
      dataType: "json",
      type: "GET",
      async: false,
      data: {
        'request_type':'ajax',         
      },
      success: function(result, success) { 
        $('#student').html(result);
      },
      error: function() {
        alert("Error is occured");
      }
    });

从 PHP 文件中，我收到了一个编码为 JSON 格式的大数组(即来自 jQuery-AJAX 函数的结果变量)。为了您的引用，我在下面仅显示该数组的前四个记录。在 HTML 选择控件中，实际上我想显示该数组中的所有元素。

[{"id":2,"stud_name":"John Dpalma","stud_address1":"277 Eisenhower Pkwy","stud_address2":"","stud_city":"Edison","stud_state":"New Jersey","stud_country":"USA","stud_zipcode":"07039","stud_email":"abc@gmail.com","created_at":1409739580,"updated_at":1410253832},
{"id":3,"stud_name":"Anthony Gonsalvis","stud_address1":"520 Division St","stud_address2":"","stud_city":"Piscataway","stud_state":"NJ","stud_country":"USA","stud_zipcode":"07201","stud_email":"pqr@gmail.com","created_at":1409740530,"updated_at":1410255590},

{"id":4,"stud_name":"James Bond","stud_address1":"6 Harrison Street, 6th Floor","stud_address2":"Ste-2324","stud_city":"New York","stud_state":"NY","stud_country":"USA","stud_zipcode":"10013","stud_email":"xyz@gmail.com","created_at":1409757637,"updated_at":1412263107},

{"id":9,"stud_name":"Mary Jane","stud_address1":"2112 Zeno Place","stud_address2":"CA","stud_city":"Venice","stud_state":"CA","stud_country":"","stud_zipcode":"90291","stud_email":"utp@gmail.com","created_at":1409908569,"updated_at":1410254282}]

在 HTML 选择控件中，我想按以下方式设置值(考虑上面数组中的前两条记录)

<select id="student" name="student" class="form-control">
  <option value="">Select Store</option>
  <option value="2">John Dpalma, 277 Eisenhower Pkwy, Edison</option>
  <option value="3">Anthony Gonsalvis, 520 Division St, Piscataway</option>
</select>

您可能已经从上面的预期输出中观察到，我想将选项的值设置为数组中的 id，并且我想显示的文本由 stud_name+stud_address1 组成+stud_city

我应该如何管理代码中 JSON 数据中的所有元素？

另外，请指导我将加载选项显示到选择控件中，直到来自 PHP 的响应到来。

请给我一些帮助。

Answer 1

success: function(result, success) { 
    var $select = $('#student');
    $.each(result, function (i, option) {
        var txt = [option.stud_name, option.stud_address1, option.stud_city];
        if (option.stud_address2)
            txt.splice(2, 0, option.stud_address2);
        $('<option>', {
            value: option.id,
            text: txt.join(', ')
        }).appendTo($select);
    });
},

或使用 $.map(效率稍微高一点):

success: function(result, success) { 
    var options = $.map(result, function (option) {
        var txt = [option.stud_name, option.stud_address1, option.stud_city];
        if (option.stud_address2)
            txt.splice(2, 0, option.stud_address2);
        return $('<option>', {
            value: option.id,
            text: txt.join(', ')
        });
    });
    $('#student').append(options);
},