Tengo 6 artículos diferentes:
Type1Item1 Type1Item2 Type1Item3 Type2Item1 Type2Item2 Type2Item3de 2 tipos diferentes:
Type1 Type2Quiero proporcionar 2 DropDownLists: uno para seleccionar un tipo, otro para seleccionar elementos del tipo seleccionado.
escribiendo solo
<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> Permitiría a los usuarios seleccionar Type2 y Type1Item3 , lo que no tiene sentido ya que Type1Item3 es del tipo Type1 .
PREGUNTA: ¿Hay alguna forma de mostrar los Item de la lista desplegable relacionados con el tipo de ItemType ?
Usar una select con optgroup puede ser una solución viable y simple para usted:
<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>Puede alternar un atributo "deshabilitado". Si un usuario selecciona type1, debe agregar un atributo deshabilitado a todas las opciones de type2*.
He codificado un ejemplo con Javascript puro.
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>Tal vez algo como lo siguiente:
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>