PHP ajax JQUERYを使用して3つの依存ドロップダウンリストを作成するにはどうすればよいですか？

次の純粋なJS実装を試してください-

var stateObject = {
  "Three Wheelers": {
    "Bajaj": ["Bajaj RE CNG", "Bajaj Diesel"],
    "Atul": ["Piaggo", "Shakti"]
  },
  "Two Wheelers": {
    "Hero": ["Splendor", "CBZ"],
    "Honda": ["Hornet", "CBR"],
  },
  "Car": {
    "Suzuki": ["Swift", "Ciaz", "Baleno", "Dzire", "Brezaa", "Ertiga", "Celerio", "Eco", "Omni", "Alto", "Scross", "Ignis", "WagonR"],
    "Hyundai": ["i20", "i10", "Creat", "Eon", "Xcent", "Santro", "Tucson", "Elatrna"],
    "Volkswagon": ["Jetta", "Polo", "Passata", "Polo", "Tiguan", "Ameo"],
    "Nissan": ["Terrano", "Duster", "Micra", "Sunny"],
    "Honda": ["City", "Verna", "CR-V", "Accord", "BR-V", "Brio", "Amaze", "Jazz"],
    "Ford": ["EcoSports", "Endaviour", "Figo", "Freestyle", "Aspire"],
  }

}
window.onload = function() {
  var stateSel = document.getElementById("stateSel"),
    countySel = document.getElementById("countySel"),
    citySel = document.getElementById("citySel");
  for (var state in stateObject) {
    stateSel.options[stateSel.options.length] = new Option(state, state);
  }
  stateSel.onchange = function() {
    countySel.length = 1; // remove all options bar first
    citySel.length = 1; // remove all options bar first
    if (this.selectedIndex < 1) {
      countySel.options[0].text = "Select Brand"
      citySel.options[0].text = "Select Modal"
      return; // done   
    }
    countySel.options[0].text = "Select Brand"
    for (var county in stateObject[this.value]) {
      countySel.options[countySel.options.length] = new Option(county, county);
    }
    if (countySel.options.length == 2) {
      countySel.selectedIndex = 1;
      countySel.onchange();
    }

  }
  stateSel.onchange(); // reset in case page is reloaded
  countySel.onchange = function() {
    citySel.length = 1; // remove all options bar first
    if (this.selectedIndex < 1) {
      citySel.options[0].text = "Please Modal"
      return; // done   
    }
    citySel.options[0].text = "Please Modal"

    var cities = stateObject[stateSel.value][this.value];
    for (var i = 0; i < cities.length; i++) {
      citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
    }
    if (citySel.options.length == 2) {
      citySel.selectedIndex = 1;
      citySel.onchange();
    }

  }
}

<select id="stateSel" size="1" name="vehicle_type" class="form-control input" required>
  <option value="" selected="selected">Select Vehicle</option>
</select>
<br>
<br>
<select id="countySel" size="1" name="brand" class="form-control input" required>
  <option value="" selected="selected">Select Brand</option>
</select>
<br>
<br>
<select id="citySel" size="1" name="modal" class="form-control input" required>
  <option value="">Select Modal</option>
</select>