Mise à jour de la liste des options <select> en utilisant jquery et ajax

Question

J'essaie de mettre à jour une liste de sélection d'options html en fonction d'une sélection effectuée sur un objet html select précédent. Ma jquery est ci-dessous. Ceci est appelé correctement.

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

Comme j'utilise un singleton pour l'interface avec ma base de données mySQL, cette fonction jquery appelle un fichier .php 'go-between' qui est appelé updateTypes.php ci-dessous:

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

Ce appels la fonction getBrandTypes dans mon singleton ci-dessous:

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

la page Web supprime correctement les options existantes de la fonction jquery, mais ne parvient pas à les mettre à jour. Il semble aller mal quand je décode les données JSON dans la jquery. Pourquoi ça va mal? La boucle de mise à jour de l'objet select est-elle appropriée?

Answer 1

Vous pouvez utiliser $.getJSON si vous attendez une réponse json. Vous pouvez également utiliser $.each(), puis simplement .append() pour la balise select. Vous pouvez référencer this.property à l'intérieur du .each().

Quelque chose comme ce qui suit:

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

Cela assumerait votre réponse JSON est quelque chose comme ce qui suit:

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

Answer 2

Votre code $("#Type").remove(); supprime l'objet sélectionne pas ses options. La bonne façon de retrait des options est:

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

ou

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

La deuxième solution semble être mieux comme indiqué ici: How to remove options from select element without memory leak?

Il y a aussi une erreur dans la partie qui ajoute une nouvelle options Votre code javascript doit être:

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

La méthode $('#Type').get(0) fait référence à l'objet DOM brut qui a la propriété « des options » que vous vouliez utiliser (How to get a DOM Element from a JQuery Selector)