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
<select name="ItemTypeSelector" id="ItemTypeSelector">
<option value="Type1">Type1</option>
<option value="Type2">Type2</option>
</select><br>
<select name="ItemSelector" id="ItemSelector">
<option value="Type1Item1">Type1Item1</option>
<option value="Type1Item2">Type1Item2</option>
<option value="Type1Item3">Type1Item3</option>
<option value="Type2Item1">Type2Item1</option>
<option value="Type2Item2">Type2Item2</option>
<option value="Type2Item3">Type2Item3</option>
</select><br>
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?
Using a select with optgroup may be a viable and simple solution for you:
<select name="ItemSelector" id="ItemSelector">
<optgroup label="Type1">
<option value="Type1Item1">Type1Item1</option>
<option value="Type1Item2">Type1Item2</option>
<option value="Type1Item3">Type1Item3</option>
</optgroup>
<optgroup label="Type2">
<option value="Type2Item1">Type2Item1</option>
<option value="Type2Item2">Type2Item2</option>
<option value="Type2Item3">Type2Item3</option>
</optgroup>
</select>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)
};<select name="ItemTypeSelector" id="ItemTypeSelector">
<option value="type1">Type1</option>
<option value="type2">Type2</option>
</select><br>
<select name="ItemSelector" id="ItemSelector">
<option>Choose</option>
<option value="Type1Item1" data-type="type1">Type1Item1</option>
<option value="Type1Item2" data-type="type1">Type1Item2</option>
<option value="Type1Item3" data-type="type1">Type1Item3</option>
<option value="Type2Item1" data-type="type2">Type2Item1</option>
<option value="Type2Item2" data-type="type2">Type2Item2</option>
<option value="Type2Item3" data-type="type2">Type2Item3</option>
</select><br>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';
};<select name="ItemTypeSelector" id="ItemTypeSelector">
<option value="Type1">Type1</option>
<option value="Type2">Type2</option>
</select><br>
<select name="ItemSelector" id="ItemSelector">
<option value="Type1Item1" class="Type1">Type1Item1</option>
<option value="Type1Item2" class="Type1">Type1Item2</option>
<option value="Type1Item3" class="Type1">Type1Item3</option>
<option value="Type2Item1" class="Type2">Type2Item1</option>
<option value="Type2Item2" class="Type2">Type2Item2</option>
<option value="Type2Item3" class="Type2">Type2Item3</option>
</select><br>