JQuery populates popup options based on another popup using Javascript Object Literal

Question

I compile a selection list for users depending on the year and make the (manufacturer) of the selected car. Instead of creating all options and parameters, and then showing and hiding them, I would just fill in the selection box and parameters with the javascript object literal, which correlates with the vehicle manufacturer. I.E. if they select this manufacturer, then fill out the following drop-down list with these vehicles and, if modified, replace them to match the new manufacturer that was modified.

Here is what I still have:

Select a selection field:

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

This is populated in the 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);
});

, , . , , , , .

, :

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

- , , . :

DAS FIDDLE

Answer 1

:

• $(document).ready(), - .
• modelMakeJsonList, modelTypeHondaJsonList modelTypeFordJsonList , .
• , 3 listItems, 3 - select. - ModelListItems, HondaListItems FordListItems - .
• jQuery, , $(this).val() , . , - $('#makeSelectionBox option:selected').text()'. makeSelectionBox.

, jQuery, , :

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

HondaListItems FordListItems , . , . : .

---

Edit:

, , :

-, json:

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

:

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

, jQuery :

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

: .

. , - - !