Hola, tengo este código, pero no sé por qué no funciona, me muestra una pantalla, pero si cambio la primera lista desplegable, no cambie el menú desplegable a la segunda lista.
Estoy usando este script HTML en la aplicación.
Este es mi código usando HTML y jQuery:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-3.5.1.min.js"> $(document).ready(function(){ var $cat = $('select[name=category]'), $items = $('select[name=items]'); $cat.change(function(){ var $this = $(this).find(':selected'), rel = $this.attr('rel'), $set = $items.find('option.' + rel); if ($set.size() < 0) { $items.hide(); return; } $items.show().find('option').hide(); $set.show().first().prop('selected', true); }); }); </script> </head> <body> <h1>Cascading Dropdown Example</h1> <select name="category"> <option value="0">None</option> <option value="1" rel="accessories">Cellphones</option> <option value="2" rel="sports">Sports</option> <option value="3" rel="cars">Cars</option> </select> <select name="items" class="cascade"> <option value="3" class="accessories">Smartphone</option> <option value="8" class="accessories">Charger</option> <option value="1" class="sports">Basketball</option> <option value="4" class="sports">Volleyball</option> <option value="6" class="cars">Corvette</option> <option value="2" class="cars">Monte Carloe</option> </select> </body> </html>Obtuve ese código de esta fuente: https://jsfiddle.net/userdude/bY5LF/
Esto funciona según lo solicitado, he comentado el cambio en el código, por lo que debería explicarse por sí mismo. Oculté todas las opciones y luego mostré las que coinciden con la selección en el primer menú desplegable.
MANIFESTACIÓN
$(document).ready(function(){ var $cat = $('select[name=category]'), $items = $('select[name=items]'); $cat.change(function(){ var $this = $(this).find(':selected'), rel = $this.attr('rel'); // Hide all $items.find("option").hide(); // Find all matching accessories // Show all the correct accesories // Select the first accesory $set = $items.find('option.' + rel); $set.show().first().prop('selected', true); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Cascading Dropdown Example</h1> <select name="category"> <option value="0">None</option> <option value="1" rel="accessories">Cellphones</option> <option value="2" rel="sports">Sports</option> <option value="3" rel="cars">Cars</option> </select> <select name="items" class="cascade"> <option value="3" class="accessories">Smartphone</option> <option value="8" class="accessories">Charger</option> <option value="1" class="sports">Basketball</option> <option value="4" class="sports">Volleyball</option> <option value="6" class="cars">Corvette</option> <option value="2" class="cars">Monte Carloe</option> </select>