jQuery remplir déroulante des options basées sur une autre liste déroulante de l'option à l'aide de Javascript Objet Littéral

Je suis la construction d'une liste de sélection pour les utilisateurs basés sur l'année et de faire (fabricant) de la voiture de leur choix. Au lieu de bâtir tous et sélectionnez options, puis l'affichage et le masquage, je voudrais seulement pour remplir la boîte de sélection et des options avec le javascript littéral d'objet qui est en corrélation avec le fabricant du véhicule. I. E. si ils choisissent ce fabricant, puis remplir la liste déroulante suivante avec ces véhicules et sur le changement, le remplacement de ceux pour correspondre à la nouvelle fabricant qui a été changé.

Voici ce que j'ai à ce jour:

Une boîte de sélection:

<label>Make</label>
<select id="makeSelectionBox" class="stringInfoSpacing">
<option value="-1" selected="selected">Make</option>
</select>

Peuplé de dans un objet littéral:

var modelMakeJsonList = {"modelMakeTable" : 
                    [
                    {"modelMakeID" : "1","modelMake" : "Honda"},
                    {"modelMakeID" : "2","modelMake" : "Ford"},
                    {"modelMakeID" : "3","modelMake" : "Chevy"},
                    {"modelMakeID" : "4","modelMake" : "Nissan"},
                    {"modelMakeID" : "5","modelMake" : "Toyota"},
                    ]};

L'aide de ce script:

 $(document).ready(function(){
  var listItems= "";
  for (var i = 0; i < modelMakeJsonList.modelMakeTable.length; i++){
    listItems+= "<option value='" + modelMakeJsonList.modelMakeTable[i].modelMakeID + "'>" + modelMakeJsonList.modelMakeTable[i].modelMake + "</option>";
  }
  $("#makeSelectionBox").html(listItems);
});

Il travaille en tant que de besoin et j'ai plus l'un d'alimenter les autres listes déroulantes. Mais comme mentionné ci-dessus, je voudrais un changement de fonction pour gérer le remplissage d'une zone de sélection au lieu d'avoir à afficher et de masquer chacun.

J'ai essayé cela, mais il ont tout cassé:

$(document).ready(function(){
$("select#makeSelectionBox").on('change',function(){
    if($(this).val()=="Honda"){
        $("select#modelSelectionBox").html(modelTypeHondaJsonList);
    }else if($(this).val()=="Ford"){
        $("select#modelSelectionBox").html(modelTypeFordJsonList);
    }
});

Si quelqu'un a des idées, s'il vous plaît laissez-moi savoir. Voici une fonctionnelle de violon:

DAS VIOLON

Juste en aparté, et les conseiller sur l'utilisation appropriée nomenclautre. Cela n'a rien à voir avec JSON. JSON est une chaîne de format de sérialisation. Vous avez affaire à un objet littéral. J'ai édité question et balises pour l'exactitude.

OriginalL'auteur isaac weathers | 2014-02-04

Des problèmes avec votre violon:

Vous avez beaucoup de $(document).ready() fonctions, mais vous avez seulement besoin d'un en haut de votre code.
Vous devez définir vos variables modelMakeJsonList, modelTypeHondaJsonList et modelTypeFordJsonList en haut de votre code, de sorte que le reste du document peut les utiliser.
Au lieu de déclarer les 3 versions du listItems variable, faire 3 versions spécifiques à chaque select boîte. - comme ModelListItems, HondaListItems et FordListItems ou quelque chose.
Dans le jQuery vous essayez de mettre en œuvre, $(this).val() est d'obtenir le numéro d'ID, pas les noms. Pour obtenir les noms, vous devriez faire quelque chose comme $('#makeSelectionBox option:selected').text()'. Cela devient le texte de l'option sélectionnée de votre makeSelectionBox.

Si vous faites de cette façon, le jQuery vous souhaitez ajouter peut ressembler à quelque chose comme ceci:

$("select#makeSelectionBox").on('change',function(){
    var selected = $('#makeSelectionBox option:selected').text();
    if(selected=="Honda"){
        $("select#modelSelectionBox").html(HondaListItems);
    } else if(selected=="Ford"){
        $("select#modelSelectionBox").html(FordListItems);
    }
});

Les variables HondaListItems et FordListItems sont faites comme vous devez le faire plus tôt. C'est en supposant que vous souhaitez inclure ces boîtes de sélection dans la conception finale. Voici un violon: Cliquez ici.

Edit:

Cependant, ici, est un refactoring de code qui peut être utile:

Tout d'abord, vous pouvez simplifier votre liste de json types de modèle:

var modelTypeJsonList = {"Honda" : 
    [
        {"modelTypeID" : "1","modelType" : "Honda1"},
        {"modelTypeID" : "2","modelType" : "Honda2"},
        {"modelTypeID" : "3","modelType" : "Honda3"},
        {"modelTypeID" : "4","modelType" : "Honda4"},
        {"modelTypeID" : "5","modelType" : "Honda5"},
        {"modelTypeID" : "6","modelType" : "Honda6"}
    ],
    "Ford" : 
    [
        {"modelTypeID" : "1","modelType" : "Ford1"},
        {"modelTypeID" : "2","modelType" : "Ford2"},
        {"modelTypeID" : "3","modelType" : "Ford3"},
        {"modelTypeID" : "4","modelType" : "Ford4"},
        {"modelTypeID" : "5","modelType" : "Ford5"},
        {"modelTypeID" : "6","modelType" : "Ford6"}
    ],
    "Chevy" : 
    [
        {"modelTypeID" : "1","modelType" : "Chevy1"},
        {"modelTypeID" : "2","modelType" : "Chevy2"},
        {"modelTypeID" : "3","modelType" : "Chevy3"},
        {"modelTypeID" : "4","modelType" : "Chevy4"},
        {"modelTypeID" : "5","modelType" : "Chevy5"},
        {"modelTypeID" : "6","modelType" : "Chevy6"}
    ],
};

Cela fournit une belle façon d'ajouter toutes les options avec une fonction comme ceci:

var updateSelectVehicleBox = function(make) {
    console.log('updating with', make);
    var listItems= "";
    for (var i = 0; i < modelTypeJsonList[make].length; i++){
        listItems+= "<option value='" + modelTypeJsonList[make][i].modelTypeID + "'>" + modelTypeJsonList[make][i].modelType + "</option>";
    }
    $("select#modelSelectionBox").html(listItems);
}

Et si vous mettez en œuvre ces deux, votre nouveau jQuery appel peut ressembler à ceci:

$("select#makeSelectionBox").on('change',function(){
    var selectedMake = $('#makeSelectionBox option:selected').text();
    updateSelectVehicleBox(selectedMake);
});

Ici est un travail de violon pour cette refactoriser: Cliquez Ici.

Qui a l'air assez propre. Laissez-moi savoir si vous êtes à la recherche de quelque chose ou avez des questions!

Je pense que cela va m'aider à traverser ce dont j'ai besoin. Merci pour le violon. Il est beaucoup plus propre que ce que j'avais. Vous a donné les points.
Si votre premier choix est "Honda" dans le "faire" sélectionner la zone, il ne charge pas la Honda modèles dans la seconde. Si votre première sélection est une autre option dans le "faire" de la boîte de sélection, puis vous sélectionnez "Honda", il vous permettra de charger les options du modèle de manière appropriée. Un correctif pour cela?
Merci, très beau et propre.

OriginalL'auteur Blundering Philosopher

Vous devez vous connecter pour publier un commentaire.