使用JSON数组的6级级联下拉列表

Question

I have a JSON array with multiple objects that I want to incorporate with my drop-down list. Is it possible to create a 6-level cascading drop-down list which are dependent with each other? When the user choose a model, the different car models will populate the second dropdown list then the user will choose the car model and then the third to sixth dropdown list will then be populated by their respective year, color, price and transmission. I am new to javascript any help will be appreciated

  var json = [{ "Model": "BMW", "Car_Model": "6-series Gran Turismo", "Year": "2018", "Color": "Orange", "Price": "$71,195", "Transmission": "Manual" }, { "Model": "BMW", "Car_Model": "i8", "Year": "2019", "Color": "Black", "Price": "$148,495", "Transmission": "Manual" }, { "Model": "BMW", "Car_Model": "M5", "Year": "2017", "Color": "Blue", "Price": "$103,595", "Transmission": "Automatic" }, { "Model": "Toyota", "Car_Model": "Sedan", "Year": "2017", "Color": "White", "Price": "$102,510", "Transmission": "Manual" }, { "Model": "Toyota", "Car_Model": "Camry", "Year": "2015", "Color": "Red", "Price": "$122,810", "Transmission": "Automatic" }, { "Model": "Toyota", "Car_Model": "Corolla", "Year": "2016", "Color": "Blue", "Price": "$152,870", "Transmission": "Automatic" }, { "Model": "Toyota", "Car_Model": "Hilux", "Year": "2018", "Color": "Black", "Price": "$258,695", "Transmission": "Manual" }, { "Model": "Toyota", "Car_Model": "Vios", "Year": "2019", "Color": "Blue", "Price": "$198,615", "Transmission": "Automatic" }, { "Model": "Hyundai", "Car_Model": "Elantra", "Year": "2017", "Color": "Black", "Price": "$152,590", "Transmission": "Manual" }, { "Model": "Hyundai", "Car_Model": "Tucson", "Year": "2018", "Color": "Red", "Price": "$132,690", "Transmission": "Automatic" }, { "Model": "Honda", "Car_Model": "Civic", "Year": "2016", "Color": "Blue", "Price": "$171,395", "Transmission": "Manual" }, { "Model": "Honda", "Car_Model": "Accord", "Year": "2019", "Color": "Black", "Price": "$159,445", "Transmission": "Automatic" }, { "Model": "Honda", "Car_Model": "CR-V", "Year": "2017", "Color": "White", "Price": "$193,675", "Transmission": "Manual" } ]; 

So far, this is what I have

 var addOptionList = { A: ["6-series Gran Turismo", "i8", "M5"], B: ["Sedan", "Camry", "Corolla", "Hilux", "Vios"], C: ["Elantra", "Tucson"], D: ["Civic", "Accord", "CR-V"], } function changecat(value) { if (value.length == 0) document.getElementById("car_model").innerHTML = "<option></option>"; else { var catOptions = ""; for (categoryId in addOptionList[value]) { catOptions += "<option>" + addOptionList[value][categoryId] + "</option>"; } document.getElementById("car_model").innerHTML = catOptions; } } 

 <b>MODEL:</b> <select id="model" name="model" onchange="changecat(this.value);" > <option value="" selected="selected">Select Model...</option> <option value="A"> BMW </option> <option value="B"> Toyota </option> <option value="C"> Hyundai </option> <option value="D"> Honda </option> </select> </select> <b>CAR MODEL:</b> <select ID="car_model" NAME="car_model"> <option value="" selected="selected">Select Model First...</option> </select> <b>YEAR:</b> <select ID="year" NAME="year"> </select> <b>COLOR:</b> <select id = "color" name = "color"> </select> <b>PRICE:</b> <select id = "price" name = "price"> </select> <b>TRANSMISSION:</b> <select id = "trnasmission" name = "transmission"> </select> 

Answer 1

Did i understand you right? if you selected one of those choices from the Model the following select box will also change depends on the json array data?

If yes check these lines of code:

 $(document).ready(function(){ for(i=0;i<json.length;i++){ $("#Model").append("<option value="+ json[i]["Model"] +">"+ json[i]["Model"] +"</option>"); $("#Car_Model").append("<option value="+ json[i]["Model"] +">"+ json[i]["Car_Model"] +"</option>"); $("#Year").append("<option value="+ json[i]["Model"] +">"+ json[i]["Year"] +"</option>"); $("#Color").append("<option value="+ json[i]["Model"] +">"+ json[i]["Color"] +"</option>"); $("#Price").append("<option value="+ json[i]["Model"] +">"+ json[i]["Price"] +"</option>"); $("#Transmission").append("<option value="+ json[i]["Model"] +">"+ json[i]["Transmission"] +"</option>"); } }) $("#Model").change(function(){ $("#Car_Model")[0].selectedIndex = $(this)[0].selectedIndex $("#Year")[0].selectedIndex = $(this)[0].selectedIndex $("#Color")[0].selectedIndex = $(this)[0].selectedIndex $("#Price")[0].selectedIndex = $(this)[0].selectedIndex $("#Transmission")[0].selectedIndex = $(this)[0].selectedIndex }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="Model"></select> <select id="Car_Model"></select> <select id="Year"></select> <select id="Color"></select> <select id="Price"></select> <select id="Transmission"></select> <script> var json = [{ "Model": "BMW", "Car_Model": "6-series Gran Turismo", "Year": "2018", "Color": "Orange", "Price": "$71,195", "Transmission": "Manual" }, { "Model": "BMW", "Car_Model": "i8", "Year": "2019", "Color": "Black", "Price": "$148,495", "Transmission": "Manual" }, { "Model": "BMW", "Car_Model": "M5", "Year": "2017", "Color": "Blue", "Price": "$103,595", "Transmission": "Automatic" }, { "Model": "Toyota", "Car_Model": "Sedan", "Year": "2017", "Color": "White", "Price": "$102,510", "Transmission": "Manual" }, { "Model": "Toyota", "Car_Model": "Camry", "Year": "2015", "Color": "Red", "Price": "$122,810", "Transmission": "Automatic" }, { "Model": "Toyota", "Car_Model": "Corolla", "Year": "2016", "Color": "Blue", "Price": "$152,870", "Transmission": "Automatic" }, { "Model": "Toyota", "Car_Model": "Hilux", "Year": "2018", "Color": "Black", "Price": "$258,695", "Transmission": "Manual" }, { "Model": "Toyota", "Car_Model": "Vios", "Year": "2019", "Color": "Blue", "Price": "$198,615", "Transmission": "Automatic" }, { "Model": "Hyundai", "Car_Model": "Elantra", "Year": "2017", "Color": "Black", "Price": "$152,590", "Transmission": "Manual" }, { "Model": "Hyundai", "Car_Model": "Tucson", "Year": "2018", "Color": "Red", "Price": "$132,690", "Transmission": "Automatic" }, { "Model": "Honda", "Car_Model": "Civic", "Year": "2016", "Color": "Blue", "Price": "$171,395", "Transmission": "Manual" }, { "Model": "Honda", "Car_Model": "Accord", "Year": "2019", "Color": "Black", "Price": "$159,445", "Transmission": "Automatic" }, { "Model": "Honda", "Car_Model": "CR-V", "Year": "2017", "Color": "White", "Price": "$193,675", "Transmission": "Manual" } ]; </script>