Estoy tratando de crear un programa que cuando seleccione un estado del menú desplegable, muestre la lista de ciudades para ese estado en otro menú desplegable que puede seleccionar. Después de elegir su ciudad y estado, ingresa una dirección, presiona enviar y mostrará la dirección completa en un nuevo archivo php.
Mi problema en este momento es que puedo mostrar los estados, pero cuando se selecciona el estado, no me da la lista de opciones para esa ciudad en el segundo menú desplegable. Cualquier ayuda es apreciada, gracias!
Puedes ver el comportamiento en este enlace
seleccionar.php
<head> <link rel="stylesheet" type="text/css" href="select_style.css"> <script type="text/javascript" src="js/jquery.js"></script> <!DOCTYPE html> <form action = "display.php"> <script type="text/javascript"> function fetch_select(val) { $.ajax({ type: 'post', url: 'fetch.php', data: { get_option:val }, success: function (response) { document.getElementById("new_select").innerHTML=response; } }); } </script> </head> <body> <p id="heading">Address Generator</p> <center> <div id="select_box"> <select onchange="fetch_select(this.value);"> <option>Select state</option> <?php include ( "accounts.php" ) ; ( $dbh = mysql_connect ( $hostname, $username, $password ) ) or die ( "Unable to connect to MySQL database" ); print "Connected to MySQL<br>"; mysql_select_db( $project ); $select=mysql_query("select state from zipcodes group by state"); while($row=mysql_fetch_array($select)) { echo "<option>".$row['state']."</option>"; } ?> </select> <select id="new_select"> </select> <div id='2'> </div> <br><br> <input type = text name="address">Address <br><br> <input type = submit> </form>buscar.php
<?php include(accounts.php); if(isset($_POST['get_option'])) { ( $dbh = mysql_connect ( $hostname, $username, $password ) ) or die ( "Unable to connect to MySQL database" ); print "Connected to MySQL<br>"; mysql_select_db( $project ); $state = $_POST['get_option']; $find=mysql_query("select city from zipcodes where state='$state'"); while($row=mysql_fetch_array($find)) { echo "<option>".$row['city']."</option>"; } exit; } ?>1) En primer lugar, falta el atributo de valor de la opción de estado
echo "<option value='".$row["state"]."'>".$row["state"]."</option>"; 2) Incluir (cuentas.php); accounts.php debe estar entre comillas dobles
3) Y falta el atributo de valor de la opción de ciudad
echo "<option value='".$row["city"]."'>".$row["city"]."</option>";4) En lugar de hacer eco cada vez, concatenar y hacer eco finalmente así
$options=""; while($row=mysql_fetch_array($find)) { $options.= "<option value='".$row["city"]."' >".$row["city"]."</option>"; } echo $options;¡¡¡Advertencia!!!
Advertencia Las extensiones mysql_query, mysql_fetch_array, mysql_connect, etc. quedaron obsoletas en PHP 5.5.0 y se eliminaron en PHP 7.0.0. En su lugar, se debe utilizar la extensión MySQLi o PDO_MySQL.
He modificado un poco tu código. Intenté hacerlo de la manera elegante. Habías escrito demasiado código superfluo. No necesitaba un elemento <form> para realizar la operación solicitada. De todos modos, a continuación se muestra el código modificado.
<!DOCTYPE html> <head> <title>Address Generator</title> </head> <body> <p id="heading">Address Generator</p> <center> <!-- <div id="select_box"> --> <select name="select_box" id="select_box"> <?php include ( "accounts.php" ) ; ( $dbh = mysql_connect ( $hostname, $username, $password ) ) or die ( "Unable to connect to MySQL database" ); print "Connected to MySQL<br>"; mysql_select_db( $project ); $select=mysql_query("select state from zipcodes group by state"); while($row=mysql_fetch_array($select)) { echo "<option>".$row['state']."</option>"; } ?> </select> <select id="new_select"> </select> <div id='2'> </div> <br><br> <input type = text name="address">Address <br><br> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#select_box').on('change', function() { var state = $(this).val(); $.ajax({ url: 'fetch.php', type: 'POST', data: {state: state}, success: function(response) { var response = JSON.parse(response); $('#new_select').find('option').remove(); var option = ''; $.each(response.cities, function(key, val) { option = option + "<option value='" + val + "'>" + val + "</option>"; }); $('#new_select').append(option); } }); }); }); </script> </body></body> . Esto no obstaculiza la ejecución de su código actual. Sin embargo, siempre puedes precargarlo, pero esa táctica es para más adelante.<form> , lo eliminé por completo. Siempre puedes agregarlo según tu conveniencia.cities de la response del objeto que obtengo de fetch.php .JSON.parse() .json_encode su variable json que almacenará los datos de las ciudades correspondientes.Espero que esto ayude. Cualquier otra consulta también es bienvenida.