<select>のリストをjqueryとajaxを使用して更新する

Question

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

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

この呼び出し：私は私のMySQLデータベースとのインターフェースにシングルトンを使用していたよう

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

、このjqueryの関数は「行く-の間で」以下であるupdateTypes.phpと呼ばれる.PHPファイルを呼び出します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データをデコードすると間違っているようです。なぜそれは間違っているのですか？選択オブジェクトを更新するためのループは適切ですか？

Answer 1

$.getJSONは、json応答が必要な場合に使用できます。また、$.each()を使用し、次にselectタグには単に.append()を使用することもできます。 .each()の中でthis.propertyを参照できます。次のような

何か：

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

Answer 2

あなたのコード$("#Type").remove();が選択対象ではないそのオプションを削除します。

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

これはあなたのJSONレスポンスには、次のようなものであると仮定します。削除するオプションの正しい方法は次のとおりです。

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

または

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

ここに述べたように第二の溶液が良くなるようだ。また、新たな追加部分でエラー

ありHow to remove options from select element without memory leak?オプション。あなたの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)方法は、あなたがこの答えは素晴らしいですが、他で述べたように（How to get a DOM Element from a JQuery Selector）