Question

如果存在三个下拉菜单，则第三个依赖于第二个和第一个下拉菜单。前两个填写例如第一个下拉菜单的字段是汽车制造商，第二个字段是汽车类型（汽车，货车，卡车），第三个是基于前两个下降的模型列表'选择。让我说我选择本田作为制造和卡车作为汽车类型。第三次下降的唯一选择是本田Ridgeline？我的问题是，如果最后的下拉菜单只有一个选项，那么我将如何在下拉菜单中自动填充一个字段，因为之前的下拉选项选项。我试图使用Javascript作为int客户端是唯一的选择。这不是HW只是想弄清楚如何沿着这些方向做某事。任何帮助将非常感激。一个JS小提琴链接也将非常感激，我没有太多运气找到这样的例子。

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: