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.

No, you do not _need_ Javascript/jQuery. It can be done with plain PHP. — Mave, Jan 11 '14 at 19:13

score 1 · Accepted Answer · edited May 23 '17 at 10:33

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:

Populate Select2 based on Select1, from MySQL DB

Populate dropdown 2 based on selection in dropdown 1

score 0 · Answer 2 · answered Jan 11 '14 at 19:10

0

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.

answered Jan 11 '14 at 19:10

awei

1,154
10
26

So i guess i have to study JavaScript/ajax/jquery in order to build it correctly and user friendly. Do you suggest any books for studying? – christostsang Jan 11 '14 at 20:19
if you want to dynamically load the cities based upon a user selection country and then submit the user response only once to your server, then yes. – awei Jan 11 '14 at 20:21

score 0 · Answer 3 · answered Jan 11 '14 at 19:13

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.

score 0 · Answer 4 · edited May 23 '17 at 12:18

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

How to make cascading drop-down lists using mysql and php

2nd Drop Down selection to be related to the selection on the 1st Drop Down Selection

4 Answers4