CODEWITHSUNDEEP
phphtmlhtml-select
user3036943
user3036943

Reputation: 7

How can i dynamically fill drop down menu depending on some other drop down menu?

I have two drop down menus. In first, you select country, and in second, you should be able to select city. Cities should be different depending on selected country. Both countries and cities are loaded from database.

There are two tabels in database, with following rows:

This is index:

<html>
<head></head>
<body>
    <select>
        <?php
            $con=mysqli_connect("localhost","root","","database");
            $result = mysqli_query($con,"SELECT * FROM countries");
            while($row = mysqli_fetch_array($result)) {
                echo '<option value="' .$row['countryId'] .'">' .$row['name'] .'</option>';
            }
        ?>
    </select>
    <br />
    <select>
        <!-- Here goes select from countries -->
    </select>
</body>

How to fill second select?

Upvotes: 0

Views: 1714

Answers (2)

ɹɐqʞɐ zoɹǝɟ
ɹɐqʞɐ zoɹǝɟ

Reputation: 4370

Put some name to your first select,lets call it here as first_select and call the second select box as second_select

Hope this helps you

<script type="text/javascript">
$(document).ready(function() {

    $("#first_select").change(function() {
        $.get('getcities.php?first_select=' + $(this).val(), function(data) {
            $("#second_select").html(data);
        }); 
    });

});
</script>

<form  method="get">
<select name="first_select" id="first_select">
       <?php
            $con=mysqli_connect("localhost","root","","database") or die(mysqli_error());
            $result = mysqli_query($con,"SELECT * FROM countries") or die(mysqli_error());
            while($row = mysqli_fetch_array($result)) {
                echo '<option value="' .$row['countryId'] .'">' .$row['name'] .'</option>';
            }
        ?>
    </select>

    <select name="second_select" id="second_select"></select>
</form>

Create a file called getcities.php and

in getcities.php

$first_select= $_GET['first_select'];

$query = mysql_query("select * from cities where countryid = {$first_select}");
while($row = mysql_fetch_array($query)) {
    echo "<option value='$row[cityid]'>$row[name]</option>";
}

Upvotes: 0

DracoMalfoy
DracoMalfoy

Reputation: 47

You'll need to use some conditional logic, assign a variable to the selection they make for their country, ie, "countryChoice" then for your second dropdown, have another while statement that lists all cities with the countryChoice.

A little something like this:

<html>
<head></head>
<body>
    <form method="post" action="/*YOUR ACTION */">
    <select name='countryChoice' id='countryChoice'>
        <?php
            $con=mysqli_connect("localhost","root","","database");
            $result = mysqli_query($con,"SELECT * FROM countries");
            while($row = mysqli_fetch_array($result)) {
                echo '<option value="' .$row['countryId'] .'">' .$row['name'] .'</option>';
            }
        ?>
    </select>
    <br />
    <select name='cityChoice' id='cityChoice'>
        <?php
            $countryChoice = $_POST['countryChoice'];
            $con=mysqli_connect("localhost","root","","database");
            $result = mysqli_query($con,"SELECT * FROM cities WHERE countryId='$countryChoice'");
            while($row = mysqli_fetch_array($result)) {
                echo '<option value="' .$row['countryId'] .'">' .$row['name'] .'</option>';
            }
        ?>
    </select>
    </form>

You may need to change it a little bit, I haven't worked with this in a while. But, I hope this gives you the right idea.

Or, as mentioned above, you can use Ajax.

Upvotes: -1

Related Questions