How do I set condition for select option in html form

Question

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

Stack overflow is not google. You should at least put in the work to find a source or try something for yourself. This community is not for posting your work and wait for someone to do it for you. If you want to learn how to program you need to learn how to problem solve. — Vincent Menzel, Jul 30 '21 at 22:29
https://stackoverflow.com/questions/4480637/how-to-change-a-selections-options-based-on-another-select-option-selected — Onimusha, Jul 30 '21 at 22:30
_" I will apreciate suggestions, directions even articles on how t achieve this."_ this basically makes your contribution off-topic for stackoverflow as asking for tutorials etc. is off-topic and a close-reason in itself. However as you demanded it, I took the opportunity to close against an earlier contribution as this basically fulfills your demand. Next time please use the search for Stackoverflow in specific. In general, as far as PHP is concerned, please check the tutorial about forms on php.net. For Javacript it might be Mozilla Development Network (MDN) or the JQuery darling. — hakre, Jul 30 '21 at 22:45
Some tips on question asking in this post: https://stackoverflow.com/help/how-to-ask — Claytronicon, Jul 30 '21 at 23:42

Spectric · Answer 1 · 2021-07-30T23:35:44.427

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>

The conditional here might get untenable if there were many car makes, perhaps passing in the make from brand select and looking up in a dict would be more scalable? — Claytronicon, Jul 30 '21 at 23:34
+1 for the update. Could also be optimized by populating "brandselect" from the same dict and have them both be dynamic, this as such could be populated from an external data source rather than being hardcoded. — Claytronicon, Jul 30 '21 at 23:46

score 1 · Answer 2 · edited Jul 30 '21 at 23:51

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>

Not recommending it necessarily, adding it as an option, but point taken. — Claytronicon, Jul 30 '21 at 23:38

How do I set condition for select option in html form

2 Answers2