2nd Drop Down selection to be related to the selection on the 1st Drop Down Selection
Question
I want to create a signup form, that its values will be stored in a database (mysql). Because i want the data to be in the correct format (New York instead of NY when asking for City) i am thinking in limiting the options using a drop down list. For example, when a user selects as a Country: UK, the second selection to narrow down to the cities inside UK and remove the rest cities of the world.
Can i do this with only PHP/HTML/MYSQL knowledge? Or do i need to know Javascript/Jquery and more?
Thanks in advance.
4 answers
solution1
1 ACCPTED 2014-01-11 23:04:58
The best approach is to use jQuery (javascript) to manage the interaction with the server (this process is known as AJAX).
First, jQuery is just a javascript library that makes it TONS easier to use javascript. Here is an interesting article about why jQuery is absolutely necessary. However, the two main reasons to use jQuery are: (1) cross-browser is done for you, and (2) waaaaaay less typing. Here are some great FREE resources for learning jQuery:
theNewBoston.com
phpAcademy.org
Next, when using jQuery, you must first load the jQuery library. After that, you can type jQuery commands instead of javascript and much magic happens much easier. Load the library like this, in your head tags:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
Finally, look here for populating Select #2 based on results from Select #1:
solution2
0 2014-01-11 19:10:27
You could do it with only PHP/HTML/MYSQL, but, it would impact the user experience as you'd have to do something like this:
1) present form with the country dropdown menu. get user submission and send back to server (via POST, PUT, GET)
2) receive the user input and then present filtered cities in second dropdown menu. now the user can select the city and POST to your server.
solution3
0 2014-01-11 19:13:04
You can do it with PHP, but not dynamic. People will have to select United Kingdom first, then press submit, and proceed to select a city.
You can, however, do it dynamic. You can use Ajax to do this properly:
The HTML:
<select name="country" id="country" onchange="getCities(this.value)">
<option>Brazil</option>
<option>United Kingdom</option>
</select>
<select name="city" id="city">
<option disabled selected>Please select a country first</option
</select>
The Javascript:
function getCities(str) {
if (str=="") {
document.getElementById("city").innerHTML="";
return;
} if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("hat").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcities.php?q="+str,true);
xmlhttp.send();
}
In getcities.php you'd get all the relevant cities, and output them as <option>city_name</option .
solution4
0 2014-01-11 19:24:23
You can easily do it by jquery ajax.
First populate dropdown for country like this:
$sql = "select * from country";
$result = //execute your query and fetch array
run a loop through $result and inside loop
echo "<option value=".$row['id'].">".$row['name']."</option>";
after that you need to call ajax on chaging this dropdown like this:
$("#your_dropdown_id").change(function(){
$.ajax({
url: "ajax.php?id="+$(this).val(),
success: function(data) {
$("#second_dropdown_id").html(data);
}
})
})
I have tried to give you basic idea.
See details : http://www.appelsiini.net/2010/jquery-chained-selects
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.