Drop down list values depending on a selected value in another drop down list

Question

I have 6 different Items:

Type1Item1
Type1Item2
Type1Item3

Type2Item1
Type2Item2
Type2Item3

of 2 different types:

Type1
Type2

I want to provide 2 DropDownLists: one to select a type, another to select items of the selected type.

Writing just

JSFiddle demo

Would allow users to select Type2 and Type1Item3 which does not make sense since Type1Item3 is of type Type1.

QUESTION: Is there a way to display Items of the drop down list related to the selected ItemType?

user_8801599 · Answer

Using a select with optgroup may be a viable and simple solution for you:

Read more here

user_11088993 · Answer

You can toggle a "disabled" attribute. If a user selects type1 you should add a disabled attribute to all type2* options.

I have coded an example with pure Javascript.

window.onload = function() {
    let current_val = '';
  document.getElementById('ItemTypeSelector').addEventListener('change', function() {
    current_val = this.value;
    
    console.log(current_val);
    for (let el of document.querySelectorAll('#ItemSelector option')) {
        el.style.display = 'none';
    }
    for (let el of document.querySelectorAll('#ItemSelector option[data-type="'+current_val+'"]')) {
      el.style.display = 'block';
    }
  }, false)
};

user_9942418 · Answer

Maybe something like the following :

window.onload = function() {
  document.getElementById('ItemTypeSelector').addEventListener('change', function() {
    if (this.value == 'Type1') {
      for (let el of document.getElementsByClassName('Type1')) el.style.display = 'block';
      for (let el of document.getElementsByClassName('Type2')) el.style.display = 'none';
      document.getElementById('ItemSelector').getElementsByTagName('option')[0].selected = 'selected'
    } else {
      for (let el of document.getElementsByClassName('Type1')) el.style.display = 'none';
      for (let el of document.getElementsByClassName('Type2')) el.style.display = 'block';
      document.getElementById('ItemSelector').getElementsByTagName('option')[3].selected = 'selected'
    }
  }, false)
  for (let el of document.getElementsByClassName('Type2')) el.style.display = 'none';
};

Drop down list values depending on a selected value in another drop down list

3 Answers