Liste von <select> optionen mit jquery und ajax

Question

Ich versuche, eine HTML-Auswahlliste von Optionen zu aktualisieren, entsprechend einer Auswahl auf einem früheren HTML-Objekt zu wählen. Meine Frage ist unten. Dies wird korrekt aufgerufen.

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

Als ich ein Singleton bin mit mit meiner MySQL-Datenbank zu verbinden, ruft diese jQuery-Funktion ein 'go-between' .php Datei namens updateTypes.php, die unten:

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

Diese Anrufe die getBrandTypes Funktion in meinem Singleton unter:

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

die Webseite entfernt richtig die bestehenden Optionen aus der jQuery-Funktion aber nicht, sie zu aktualisieren. Es scheint falsch zu gehen, wenn ich die JSON-Daten in der jQuery dekodiere. Warum läuft es falsch? Ist die Schleife zum Aktualisieren des Auswahlobjekts geeignet?

Answer 1

Sie können $.getJSON verwenden, wenn Sie eine JSON-Antwort erwarten. Sie können möglicherweise auch $.each() und dann einfach .append() zu dem select Tag verwenden. Sie können innerhalb der .each() auf this.property verweisen.

Etwas wie folgt aus:

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

Dies würde Ihre Json Antwort nehmen ist so etwas wie die folgenden:

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

Answer 2

Ihr Code $("#Type").remove(); entfernt das ausgewählte Objekt nicht seine Optionen. Der richtige Weg zur Entfernung von Optionen ist:

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

oder

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

Die zweite Lösung scheint besser zu sein als hier angegeben: How to remove options from select element without memory leak?

Es gibt auch einen Fehler in dem Teil, der neu hinzufügt Optionen. Ihr JavaScript-Code sollte sein:

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

Die $('#Type').get(0) Verfahren beziehen sich auf das Roh-DOM-Objekt, das die „Optionen“ Eigenschaft hat, dass Sie (How to get a DOM Element from a JQuery Selector)