Bandito Bandito - 1 year ago 81
jQuery Question

How to auto populate a Dropdown based on the results of the prior two related dropdowns

If three drop down menus are present, the third relies on the second and first drop down menus. The first two get filled in for example the field for the first drop down menu is Automobile Manufacturer, the second field is the Type of Automobile (car,van, truck) and the third is a list of models based on the first two drop downs' selections.Let's say I chose Honda as the Make and Truck as the Automobile Type. The only option for the third drop down would be the Honda Ridgeline?
My question is how would I Auto populate a field in a drop down menu if the final drop down only has one option as a result of the prior drop downs' selected options. I am trying to using Javascript as having int client-side is the only option. This is not HW just trying to figure out how to do something along these lines. Any help would be much appreciated. A JS fiddle link would also be much appreciated, I have not had much luck finding an example like this.

Answer Source

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 = ""
    html += '<option value="' + option + '">' + option + '</option>'

<script src=""></script>
<select id="make">
  <option value="Honda">Honda</option>
  <option value="Toyota">Toyota</option>
<select id="type">
  <option value="car">Car</option>
  <option value="truck">Truck</option>
<select id="options">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download