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

时间：2019-02-11 23:39:35

标签： javascript html arrays json object

我有一个包含多个对象的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>

1 个答案:

答案 0 :(得分：0)

我明白你的意思吗？如果您从“模型”中选择了这些选项之一，则以下选择框也会根据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>

相关问题
最新问题