Aktualizacja listy opcji <select> przy użyciu jquery i ajax

Question

Próbuję dokonać wyboru listy opcji aktualizacji html zgodnie z wyborem dokonanym na wcześniejszym obiekcie zaznaczenia html. Mój jquery jest poniżej. To się nazywa poprawnie.

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

Ponieważ używam pojedyncza do łączenia się z moim bazy danych MySQL, jQuery funkcja ta nazywa 'go-between' .php pliku o nazwie updateTypes.php który znajduje się poniżej:

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

Wymaga funkcja getBrandTypes w moim Singleton poniżej:

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

strona internetowa prawidłowo usuwa istniejące opcje z funkcji jquery, ale nie trafia do ich aktualizacji. Wydaje się, że dzieje się nie tak, kiedy dekoduję dane JSON w jquery. Dlaczego idzie źle? Czy pętla aktualizująca wybrany obiekt jest odpowiednia?

Answer 1

Możesz użyć $.getJSON, jeśli oczekujesz odpowiedzi json. Możesz także użyć $.each(), a następnie po prostu .append() do tagu select. Możesz odwołać się do this.property wewnątrz .each().

Coś jak następuje:

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

Byłoby to zakładamy swoją odpowiedź JSON jest coś takiego, co następuje:

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

Answer 2

Kod $("#Type").remove(); usuwa select nie przedmiot jego opcje. Prawidłowy sposób opcji usuwania jest:

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

lub

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

Drugie rozwiązanie wydaje się być lepiej jak podano tutaj: How to remove options from select element without memory leak?

Jest też błąd w części, która dodaje nowe opcje. Twój kod javascript powinny być:

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

Sposób $('#Type').get(0) odnosi się do surowego obiektu DOM, który ma właściwość „Opcje”, że chcesz skorzystać (How to get a DOM Element from a JQuery Selector)