This is very similar to the other long-running “submenu” question, but seems on the face of it to be a lot simpler. You just need a drop-down menu to select the county (Cheshire or whatever), then a short Ajax call to a query that returns all the towns / cities with a matching “county” field.
So basically trap the “change” event for your main drop-down, pass the selection from that drop-down via Ajax to your selection routine, have that recover the cities and send them back as a formatted html list, then insert that into your submenu.
So a simple example (that I haven’t got time to test) based on some other stuff in here. Your html code to display the main selection, which obviously would have the counties populated from a database query rather than hard-coded:
<html>
<body>
<script src="../jquery-1.11.1.js"></script>
<select name="county" id="county" >
<option value="*invalid*">Select County</option>
<option value="Bedfordshire">Bedfordshire</option>
<option value="Cheshire">Cheshire</option>
<option value="Derbyshire">Derbyshire</option>
</select>
</br></br></br><div id="towns">
<select name="town" id="town">
<option value='1'>Select town</option>
</select></div>
<script>
$('#county').on('change', function(){
var county = this.value;
$.ajax({
type: "POST",
url: "counties.php",
data:'county='+county,
success: function(result){
$("#town").html(result);
}
});
});
</script>
</body>
</html>
and the php that you call from Ajax, called “counties.php”:
<?php
$county = $_POST['county'];
require_once("your_database_connection_code");
if ($county == "*invalid*") exit();
$query = "select city from mytable where county = :mycounty"; // Assuming PDO
$prep = $conn->prepare($query);
$prep->bindParam(":mycounty", $county);
$prep->execute();
$results = $prep->fetchAll();
$options = "";
foreach ($results as $result) {
$options .= '<option value="' . $result . '">';
$options .= $result;
$options .= '</option>';
}
echo $options;
?>
You might run into some issues with passing the county name as a parameter, particularly when you get to somewhere like “Greater Manchester” with a space in it. You should read up on database normalisation though, because really there should be another table containing counties, each with an id value, and that id used in the towns table. It’s the “proper” way to do it (as I read it) and it would get rid of problems with spaces, because you’d use the id for the value instead of the string. Way back, it would also have been to save disk space. If you really can’t change that for some reason, you might need to add some url-encoding and decoding around the place. I think I’d also fold to upper or lower case for the query as well, just in case - another thing that goes away if you use a separate counties table, you’ll know for sure they are all exactly the same with no spelling errors.
What this is doing in a nutshell is using the short PHP code to generate the html code for the “options” part of the second drop-down menu. Your Ajax grabs the selection value from the first drop-down, passes it to the PHP, the PHP runs the query and generates the html code (which is returned to the calling code simply by outputting it with ‘echo’), then your “success” function (back in JS) sticks the returned value in the div that contains the options for the second drop-down. You could just return the cities in an array and then have your JS code do something with it, but for a drop-down this seems an easy way to me. But in some environments you might not have permission to change the PHP and just have to deal with the format it sends - if you were calling someone else’s web service, for example, it’s unlikely they’d format the results in this way.
