如何根据前两个相关下拉列表的结果自动填充下拉列表[关闭]

Question

如果存在三个下拉菜单，则第三个依赖于第二个和第一个下拉菜单。前两个填写例如第一个下拉菜单的字段是汽车制造商，第二个字段是汽车类型（汽车，货车，卡车），第三个是基于前两个下拉菜单的模型列表' 选择。假设我选择本田作为制造商，卡车作为汽车类型。第三个下拉选项的唯一选择是本田 Ridgeline？ 我的问题是，如果最终下拉菜单由于先前下拉菜单的选择选项而只有一个选项，我将如何自动填充下拉菜单中的字段。我正在尝试使用 Javascript，因为 int 客户端是唯一的选择。这不是硬件只是想弄清楚如何按照这些思路做事。任何帮助将非常感激。一个 JS 小提琴链接也将不胜感激，我没有太多运气找到这样的例子。

Answer 1

var data = {
  Honda: {
    car: ["Civic", "Acura"],
    truck: ["Ridgeline"]
  },
  Toyota: {
    car: ["Camry", "Corolla"],
    truck: ["Some truck"]
  }
}

var updateDropDown = function(){
  var make = $("#make").val()
  var type = $("#type").val()
  var options = data[make][type]
  var html = ""
  options.forEach(function(option){
    html += '<option value="' + option + '">' + option + '</option>'
  })
  $("#options").html(html)
}

$("#make").change(updateDropDown)
$("#type").change(updateDropDown)
updateDropDown();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="make">
  <option value="Honda">Honda</option>
  <option value="Toyota">Toyota</option>
</select>
<select id="type">
  <option value="car">Car</option>
  <option value="truck">Truck</option>
</select>
<select id="options">
</select>