Tengo 2 listas desplegables lado a lado. Cuando el usuario selecciona de la primera lista, necesito que se muestren las opciones de la segunda lista.

Las subopciones se recuperarán de una base de datos. Tengo una página que devolverá el html necesario dado el padre específico. Solo necesito la selección de la primera lista para activar una actualización de la lista # 2.

¿Cuál es la mejor manera de lograr esto?

<select id="parent" name="list1">
    <option value="1">Parent 1</option>
    <option value="2">Parent 2</option>
    <option value="3">Parent 3</option>
    <option value="4">Parent 4</option>
</select>

<select id="child" name="list2">
</select>

Advertencia: no se puede usar un formulario, porque las selecciones son parte de otro formulario.

1
mrpatg 1 nov. 2009 a las 14:29

3 respuestas

La mejor respuesta

La forma normal de hacer esto es hacer una solicitud AJAX después de seleccionar el primer menú desplegable para recuperar el contenido del segundo.

La forma exacta en que lo haga dependerá de los marcos / bibliotecas que esté utilizando, pero aquí hay un ejemplo de un complemento jQuery diseñado para ello:

Complemento jQuery en cascada

También hay una serie de preguntas relacionadas sobre SO que pueden ayudar:

https://stackoverflow.com/search?q=cascading+dropdown

1
Community 23 may. 2017 a las 12:07

Una manera muy simple es configurar su script para generar el marcado completo de la lista de selección generada e inyectarlo en un elemento contenedor, por ejemplo:

<div id="wrapper">
    <select id="child" name="list2">
    </select>
</div>

$("#parent').change(function() {
    $('#wrapper').load('getSelect.php','selection=' + $(this).val());
    return false; // may or may not be needed
});
0
karim79 1 nov. 2009 a las 11:38

Utilice el cambio de evento de select para llamar a una función ajax para recuperar los nuevos datos

1
AntonioCS 1 nov. 2009 a las 11:33