时间戳

首页 > 解决方案 > 使用 JSON 数组的 6 级级联下拉列表

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

问题描述

我有一个包含多个对象的 JSON 数组，我想将这些对象合并到我的下拉列表中。是否可以创建一个相互依赖的 6 级级联下拉列表？当用户选择车型时，不同的车型将填充第二个下拉列表，然后用户将选择车型，然后第三至第六个下拉列表将填充它们各自的年份、颜色、价格和传输。我是 javascript 新手，任何帮助将不胜感激

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

到目前为止，这就是我所拥有的

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>

标签： javascripthtmlarraysjsonobject

解决方案

我没听错吗？如果您从模型中选择了其中一个选项，则以下选择框也会根据 json 数组数据而改变？

如果是，请检查以下代码行：

  
  $(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>

推荐阅读