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

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

在 PHP 文件中循环回显以下内容：

echo '<option value="">'.$stud_name.', '.$stud_address1.', '.$stud_address2.', '.$stud_city.', '.$stud_state.', '.$stud_country.'</option>';

然后通过 ajax 成功将此结果附加到使用 jQuery 的选择下拉列表中。

的解决方案。这将检查地址 2 并将其相应地添加到选项中。

JS代码：

for(var i=0;i<result.length;i++){
    if(result[i]["stud_address2"]==""){
        $('#student').append('<option value="' + result[i]["id"] + '">' + result[i]["stud_name"] + ', ' + result[i]["stud_address1"]+ ', ' +result[i]["stud_city"] +'</option>');}
    else{
     $('#student').append('<option value="' + result[i]["id"] + '">' + result[i]["stud_name"] + ', ' + result[i]["stud_address1"]+ ', '+ result[i]["stud_address2"]+ ', ' +result[i]["stud_city"] +'</option>');
    }
}

这是一个有效的演示

这正是您所需要的！

$(document).ready(function(){
   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) { 
           $.each(result,function(index,item){ 
             $label = item.stud_name +', ' + item.stud_address1 +', ' + item.stud_city;
             $('#student').append('<option value="'+ item.id +'">'+ $label +'</option>');  
           });
         },
         error: function() {
           alert("Error is occured");
         }
   });
});

历从服务器接收的 JSON，为每个记录创建选项标记，然后将它们附加到 select 元素的问题：

var response = [{"id":2,"stud_name":"John Dpalma" ... }]
$.each(response, function (index, record) {
  if (!record.stud_address2){
    var stud_address2 = "";
  } else {
    var stud_address2 = record.stud_address2;
  }
  $('<option>', {
    value: record.id,
    text: record.stud_name + ", " + record.stud_address1 + ", " + record.stud_city + ", " + stud_address2
  }).appendTo("#student");
});

演示

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
   <script>
 function __highlight(s, t) {
        var matcher = new RegExp("(" + $.ui.autocomplete.escapeRegex(t) + ")", "ig");
         return s.replace(matcher, "<strong>$1</strong>");
               }
    $(document).ready(
              function() {
                 $("#suggest").autocomplete(
                  {
                    source : function(request, response) 
                {
                    $.ajax({
                            url : 'URL',
                            dataType : 'json',
                            data : { term : request.term },
                            success : function(data) 
                                        {
                                            //alert(data[0].title);
                                            response($.map(data, function(item) {
                                                        //alert(item);
                             return {                                                           
                    label : __highlight(item.title, request.term),
                   value : item.title
                        };
                                                                                }));
                                        }
                        });
                },
        minLength : 3,
        select : function(event, ui) 
                {
                    if(ui.item){
                        $(event.target).val(ui.item.value);
                        }
                        //submit the form
                    $(event.target.form).submit();
                }
        }).keydown(function(e) {
                                    if (e.keyCode === 13) 
                                    {
                                        $("#search_form").trigger('submit');
                                    }
                                }).data("autocomplete")._renderItem = function(ul, item) 
                                                                    {
                            return $("<li></li>").data("item.autocomplete", item).append(
                            $("<a></a>").html(item.label)).appendTo(ul);
                                                                    };
        });
               </script>