使用Json阵列响应中的选项填充选择

Question

请原谅我之前已经回答的问题。我做了我的研究，尝试了几个例子，并决定坚持这个：

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，我试图编写以填充选择选项。第一个没有产生错误，但没有用选项填充select：

$(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);

});