Tengo una forma dinámica con selección de cadena AJAX. La selección de cadena se aplica a 2 listas de entrada desplegables. El primer menú desplegable tiene una lista de categorías de alimentos. El segundo menú desplegable tiene una lista de alimentos. La selección de opciones en el primer menú desplegable afectará las opciones disponibles en el segundo menú desplegable.
La selección de cadena AJAX actualiza el HTML correctamente cuando miro el código fuente. Sin embargo, cuando trato de usar JavaScript para obtener el valor de la opción seleccionada en el segundo menú desplegable antes y después del cambio de HTML, sigue siendo el mismo.
¿Hay alguna forma de obtener el valor de la nueva opción seleccionada?
$('#table').on('change', '.category', function(){ var $row = $(this).closest('tr'); var categoryid = $row.find('.category option:selected').val() // display old selected food option alert($row.find('.food option:selected').val()); $.get('./include/ajax.php?category=' + categoryid, function(data) { $row.find('.food').html(data); }) // display new selected food option alert($row.find('.food option:selected').val()); });
El ajax.php simplemente toma la cadena de consulta de la categoría y genera una lista de opciones de selección HTML en esa categoría de alimentos. Por ejemplo, si la categoría es Bebidas , ajax.php generará la siguiente página HTML con una lista de opciones para bebidas. La primera opción que tiene el atributo seleccionado :
<option value="Beer" selected>Beer</option> <option value="Coke">Coke</option>
Entonces, si cambio la opción seleccionada en el primer menú desplegable de Frutas a Bebidas , las opciones para el segundo menú desplegable cambiarán de:
<select name="category[]" class="category"> <option value="Fruits" selected>Fruits</option> <option value="Drinks">Drinks</option> </select> <select name="food[]" class="food"> <option value="Apple" selected>Apple</option> </select>
a esto:
<select name="category[]" class="category"> <option value="Fruits">Fruits</option> <option value="Drinks" selected>Drinks</option> </select> <select name="food[]" class="food"> <option value="Beer" selected>Beer</option> <option value="Coke">Coke</option> </select>