Mise à jour de la liste de & lt; sélectionnez & gt; options utilisant jquery et ajax

Je suis en train de faire un select html liste des options de mise à jour selon une sélection a été faite sur un html préalable sélectionner un objet. Mon jquery est ci-dessous. Ce qui 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]));
    }
});

Que je suis à l'aide d'un singleton à l'interface avec ma base de données mySQL, cette fonction jquery appelle un "go-between' .fichier php appelé updateTypes.php ce qui est ci-dessous:

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

Cela appelle la getBrandTypes fonction 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 correctement supprime les options existantes de la fonction jquery mais ne parvient pas à mettre à jour. Il semble aller mal quand je décoder les données JSON dans le jquery. Pourquoi est-ce qu'il va mal? Est la boucle de mise à jour de l'objet à sélectionner appropriée?

source d'informationauteur Ben Thompson

  1. 17

    Vous pouvez utiliser $.getJSON si votre attend une réponse json. Vous pourriez également être en mesure d'utiliser $.each() et puis tout simplement .append() à la select tag. Vous pouvez faire référence à this.property à l'intérieur de la .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 suppose que votre réponse json est quelque chose comme ce qui suit:

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

  2. 12

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

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

    ou

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

    La deuxième solution semble être la meilleure comme indiqué ici: Comment faire pour supprimer les options de sélectionner l'élément sans fuite de mémoire?

    Il y a aussi une erreur dans la partie qui ajoute de nouvelles 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 $('#Type').get(0) méthode se réfère à l'brut DOM objet qui a les "options" de la propriété que vous souhaitez utiliser (Comment obtenir un Élément du DOM à partir d'un Sélecteur JQuery)