请原谅我问了一些以前已经回答过的问题。我已经完成了我的研究,尝试了几个例子,并决定坚持这个:
http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/
我有一个数组形式的 json 响应:
[{"Key":"100","Value":"Allium"},{"Key":"101","Value":"Banksia"}]
query-mobile 前端如下:
<select name="flower" id="flower-name"> <option value="">-Select Flower Name-</option></select>
按照上面的示例,我尝试编写两个版本的 jQuery 来填充选择选项。第一个不会产生错误,但不会使用选项填充选择:
$(function(){
$('#page-id select #flower-name').change(function(){
var options = $('#page-id select #flower-name option');
var url = "http://flower-server.com:80" ;
$.getJSON(url,{id: $(this).val(), ajax: 'true'}, function(data,options){
options.remove();
for (var i=0 ; i<data.length; i++){
options += '<option value="' + data[i]["Key"] + '">' + data[i]["Value"] + '</option>';
}
this.html(options);
});
});
});
第二个产生此错误:
elem.nodeName is undefined file: /jquery.js Line 2317
这是代码:
function flowerSelectRequest(url, selectObjId, options) {
var result = ""
$.ajax({
type: "GET",
url: url,
id: $(this).val(),
dataType: "jsonp",
success: function(data){
selectObjId.change(function() {
options.remove();
for (var i=0 ; i<data.length; i++){
options += '<option value="' + data[i]["Key"] + '">' + data[i]["Value"] + '</option>';
}
selectObjId.html(options);
});
},
error: function(jqXHR, textStatus, errorThrown){
//error handling
},
complete: function(){
//
}
});
return result;
}
$('#page-id').live("pagecreate", function() {
var selectObjId = $('#page-id select #flower-name');
var options = $('#page-id select #flower-name option');
var url = "http://fower-server.com:80" ;
flowerSelectRequest(url, selectObjId,options);
});