我有以下 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 的响应到来。
请给我一些帮助。
最佳答案
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);
},
关于javascript - 如何使用 jQuery 提取作为 AJAX 响应接收到的 JSON 数据并将其添加到 HTML 选择下拉列表中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27521454/