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
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
Share Improve this question edited Feb 8, 2014 at 1:34 Mike Brant 71.4k10 gold badges101 silver badges104 bronze badges asked Feb 4, 2014 at 19:15 isaac weathersisaac weathers 1,4725 gold badges29 silver badges54 bronze badges 1- Just as an aside, and to advise on using proper nomenclautre. This has nothing to do with JSON. JSON is a string serialization format. You are dealing with an object literal. I edited question and tags for correctness. – Mike Brant Commented Feb 8, 2014 at 1:34
1 Answer
Reset to default 10Problems with your fiddle:
- You have many
$(document).ready()functions, but you only need one - at the top of your code. - You should define your variables
modelMakeJsonList,modelTypeHondaJsonListandmodelTypeFordJsonListat the top of your code so that the rest of the document can use them. - Instead of declaring 3 versions of the
listItemsvariable, make 3 versions - specific to eachselectbox. - likeModelListItems,HondaListItemsandFordListItemsor something. - 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 yourmakeSelectionBox.
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!