web-dev-qa-db-ja.com

jqueryとajaxを使用して<select>オプションのリストを更新する

以前のhtml selectオブジェクトで行われた選択に従って、オプションのhtml selectリストを更新しようとしています。私のjqueryは以下です。これは正しく呼び出されています。

var brandName = $("#Brand").val();

$.get("updateTypes.php?q="+brandName, function(data) {

    $("#Type").remove();
    var typeData = JSON.parse(data);

    for (loop=0; loop < typeData.length; ++loop) {
        $("#Type").options.add(new Option(typeData[loop]));
    }
});

Mytonデータベースとのインターフェースにシングルトンを使用しているため、このjquery関数は、以下にあるupdateTypes.phpと呼ばれる 'go-between' .phpファイルを呼び出します。

include 'databaseInterface.php';
$brand = $_GET["q"];
$typesData = databaseInterface::getBrandTypes($brand);
return $typesData;

これは、以下のシングルトンでgetBrandTypes関数を呼び出します。

$query = "SELECT psTypeName FROM types WHERE brands_psBrandName='$BrandName'";
$result = mysqli_query($con, $query) or die ("Couldn't execute query. ".mysqli_error($con));
$resultArray = array();
while ($row = mysqli_fetch_assoc($result)) { 
    extract($row);
    $resultArray[] = $psTypeName;   
}

return json_encode($resultArray);

Webページは、jquery関数から既存のオプションを正しく削除しますが、それらの更新に失敗します。 jqueryでJSONデータをデコードするとうまくいかないようです。なぜそれがうまくいかないのですか？選択オブジェクトを更新するためのループは適切ですか？

phpjqueryajaxjson
12
Ben Thompson

Json応答が必要な場合は、_$.getJSON_を使用できます。 $.each()を使用して、selectタグに.append()を使用することもできます。 .each()内で_this.property_を参照できます。

次のようなもの：

_$.getJSON("updateTypes.php?q="+brandName, function(data) {
    $("#Type").html('');
    $.each(data, function(){
        $("#Type").append('<option value="'+ this.value +'">'+ this.name +'</option>')
    )
})
_

これは、json応答が次のようなものであると想定します。

_[ { name : "foo", value : "bar" }, { name : "another", value : "example" } ]_

20
Shawn Northrop

コード$("#Type").remove();は、オプションではなく選択オブジェクトを削除します。オプションを削除する正しい方法は次のとおりです。

_$("#Type option").remove();
_

または

_$("#Type").html('');
_

2番目の解決策は、ここで述べられているように優れているようです： メモリリークなしでselect要素からオプションを削除する方法？

新しいオプションを追加する部分にもエラーがあります。 JavaScriptコードは次のようになります。

_var brandName = $("#Brand").val();

$.get("updateTypes.php?q="+brandName, function(data) {

    $("#Type option").remove();
    var typeData = JSON.parse(data);

    for (loop=0; loop < typeData.length; loop++) {
        $("#Type").get(0).options.add(new Option(typeData[loop]));
    }
});
_

$('#Type').get(0)メソッドは、使用したい "options"プロパティを持つ生のDOMオブジェクトを参照します（ JQueryセレクターからDOM要素を取得する方法 ）

12
Marcin Krawiec