jquery - 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 の 2 つのバージョンがあります。最初の例ではエラーは発生しませんが、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);
    });
});
});

2番目はこのエラーを生成します:

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

});