jQuery populate drop-down options based on another drop-down option using Javascript Object Literal

Question

I am building up a selection list for users based on the year and make (manufacturer) of the car they choose. Instead of building up all select and options and then showing and hiding them, I would only like to populate the select box and options with the javascript object literal that correlates with the vehicle manufacturer. I.E. if they choose this manufacturer then populate the next dropdown with these vehicles and on change, replace those to match to the new manufacturer that has been changed.

Here's what I have so far:

A select box:

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

That is populated in an object literal:

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

Using this 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);
});

It is working as needed and I have an additional one to populate the other dropdowns. But as mentioned above, I would like an on change function to handle the populating of one select box instead of having to show and hide each one.

I tried this but it broke everything:

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

If anyone has any ideas please let me know. Here is a functional fiddle:

DAS FIDDLE

Answer 1

Problems with your fiddle:

1. You have many $(document).ready() functions, but you only need one - at the top of your code.
2. You should define your variables modelMakeJsonList, modelTypeHondaJsonList and modelTypeFordJsonList at the top of your code so that the rest of the document can use them.
3. Instead of declaring 3 versions of the listItems variable, make 3 versions - specific to each select box. - like ModelListItems, HondaListItems and FordListItems or something.
4. In the jQuery you are trying to implement, $(this).val() is getting the ID number, not the make names. To get the names, you should do something like $('#makeSelectionBox option:selected').text()'. This gets the text in the selected option of your makeSelectionBox.

If you do it this way, the jQuery you want to add can look something like this:

$("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);
    }
});

The variables HondaListItems and FordListItems are made like you have them earlier. This is assuming you want to include those selection boxes in your final design. Here is a fiddle: Click here.

---

Edit:

However, here is a refactoring of your code that may be useful:

First, you can simplify your list of json model types to this:

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"}
    ],
};

This provides a nice easy way to add all options with a function like this:

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

And if you implement both of these, your new jQuery call can look just like this:

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

Here is a working fiddle for this refactor: Click Here.

Which looks pretty clean. Let me know if you are looking for something else or have any questions!