How do I set condition for select option in html form [duplicate]

Solution for How do I set condition for select option in html form [duplicate]
is Given Below:

I want to have a form that has car manufacturers and car models I will have two select inputs one will have the manufacturer options based on the selected manufacturer the second select input should have only car models from that manufacturer. Now, I am trying to make someone do the work for me coz sincerely I am new to this. I will appreciate suggestions, directions even articles on how t achieve this.

<p>Manufacturer <br>

<select>
<option value="Toyota"> Toyota</option>
<option value="Nissan"> Nissan</option>
</select></p>


<p>Make <br>

<select>
<option ></option>

</select></p>

<!-- if a user should choose Toyota I want the second selection to display Toyota makes in the option like MarkX, Avensis but if they choose Nissan the options should be bluebird, Murano, Tiida like that-->

You can store the options if the user selects “Toyota” and the options if the user selects “Nissan” in an array, then attach a change event listener to the select that checks its value.

If the value is “Toyota“, iterate through the “Toyota” array and append an option with the value and content set to the item. Otherwise, loop through the “Nissan” array.

const toyotaOptions = ['MarkX', 'Avensis'];
const nissanOptions = ['bluebird', 'Murano', 'Tiida'];

function updateCarByBrand() {
  carselect.innerHTML = "";
  if (brandselect.value == "Toyota") {
    toyotaOptions.forEach(e => carselect.innerHTML += `<option value=${e}">${e}</option>`)
  } else {
    nissanOptions.forEach(e => carselect.innerHTML += `<option value=${e}">${e}</option>`)
  }
}
brandselect.addEventListener('change', updateCarByBrand);
updateCarByBrand();
<p>Manufacturer <br>

  <select id="brandselect">
    <option value="Toyota"> Toyota</option>
    <option value="Nissan"> Nissan</option>
  </select>
</p>


<p>Make <br>

  <select id="carselect">
  </select>
</p>

Or a more customizable and scalable solution:

const options = {
  'Toyota': {
    cars: ['MarkX', 'Avensis']
  },
  'Nissan': {
    cars: ['bluebird', 'Murano', 'Tiida']
  }
}

function updateCarByBrand() {
  carselect.innerHTML = "";
  options[brandselect.value].cars.forEach(e => carselect.innerHTML += `<option value=${e}">${e}</option>`)
}
brandselect.addEventListener('change', updateCarByBrand);
updateCarByBrand();
<p>Manufacturer <br>

  <select id="brandselect">
    <option value="Toyota"> Toyota</option>
    <option value="Nissan"> Nissan</option>
  </select>
</p>


<p>Make <br>

  <select id="carselect">
  </select>
</p>

A jQuery approach:

let options = [
  ["MarkX", "Avensis"],
  ["bluebird", "Murano", "Tiida"]
];

$(document).ready(function () {
  $("#type").change(function () {
    $("#model").empty();
    $.each(options[$(this).prop("selectedIndex")], function (key, value) {
      $("#model").append($("<option></option>").attr("value", value).text(value));
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type">
<option value="Toyota" selected> Toyota</option>
<option value="Nissan"> Nissan</option>
</select>

<select id="model">
<option value="" ><option value="Toyota" selected>MarkX</option><option value="Toyota">Avensis</option></option>
</select>