PHP: How to change options in select element when changing the value in another select element?

Question

I have made a big process since last question. I have almost finished my little challenge.

Now I have another problem: I have two drop down lists (select elements) items in html code. In the first one I can choose a (school) subject. If this value change, I want that the second drop down list will update its options, as an example:

First drop down: History Second drop down: World War, French Revolution

First drop down: Geography Second drop down: Capitals, Where is...

Here is my code:

<?php
session_start();

if(isset($_SESSION['schueler'])) {
if($_SESSION['schueler'] == 3) {
?>
<!DOCTYPE html>
<html>
<head>
<title>LA4S - Sch&uuml;lerbereich</title>
<link href="./Style/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<script type="text/javascript"> 
function getquestions() {
    document.getElementById("getquestions").style.visibility = "visible";
}
 </script>
<div>
    <img src="./Pictures/logo_small.png" width="100" id="logo" />&nbsp;&nbsp;&nbsp;<span class="title">Sch&uuml;lerbereich</span>
</div>
<br />
<div class="menu">
    <a onclick="getquestions()">Fragen beantworten</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a style="text-decoration: none;" href="login.php?logout=3">Ausloggen</a>
</div>
<br />
<div id="getquestions">
    <table>
        <form action="home.php" method="post">
            <tr>
                <td>
                    Fach&nbsp;
                </td>
                <td>
                    <select name="subject" size="1" id="type_select">
                            <?php
                                $host = "localhost";
                                $user = "root";
                                $pass = "";
                                $dbase = "la4s";

                                $db = mysqli_connect($host, $user, $pass, $dbase);

                                if (mysqli_connect_errno())
                                {
                                    echo mysqli_connect_errno();
                                    die ("Error");
                                }

                                $getSubjectsForForm = mysqli_query($db, "SELECT * FROM subject");

                                while($ResultArray = mysqli_fetch_array($getSubjectsForForm)) {
                                    echo '<option value="'.$ResultArray['sid'].'">'.$ResultArray['subject'].'</option>';
                                }

                                mysqli_close($db);
                            ?>
                        </select>
                </td>
            </tr>
            <tr>
                <td>
                    Thema&nbsp;
                </td>
                <td>
                    <select name="theme" size="1" id="type_select">
                            <?php
                                $host = "localhost";
                                $user = "root";
                                $pass = "";
                                $dbase = "la4s";

                                $db = mysqli_connect($host, $user, $pass, $dbase);

                                if (mysqli_connect_errno())
                                {
                                    echo mysqli_connect_errno();
                                    die ("Error");
                                }

                                $subject = $_POST['subject'];

                                $getThemesOfThatSubject = mysqli_query($db, "SELECT * FROM theme WHERE sid =".$subject.";");

                                while($ResultArray = mysqli_fetch_array($getThemesOfThatSubject)) {
                                    echo '<option value="'.$ResultArray['tid'].'">'.$ResultArray['theme'].'</option>';
                                }

                                mysqli_close($db);
                            ?>
                        </select>
                </td>
            </tr>
            <tr>
                <td colspan="2" id="button_login">
                    <input type="submit" name="submit" value="Fragen beantworten" />
                </td>
            </tr>
        </form>
    </table>
</div>
<?php
    }
    else {
        echo "Zugriff verweigert!";
    }
}
else {
    echo "Zugriff verweigert!";
}
?>
</body>
</html>

The first drop down list is called subject and the second one is called theme.

So I try again to explain: If the value in drop down list subject changes, the drop down list theme will update its options.

I hope you can help me.

Greeez Tomi

You are going to need some ajax and jquery in order to do this.. — Naruto
– Naruto, Commented Apr 23, 2014 at 14:04
You have to write onchange event handler for the first dropdown and then manipulate the options in the second dropdown. — SHAKIR SHABBIR
– SHAKIR SHABBIR, Commented Apr 23, 2014 at 14:14

AlbertoGiorgino · Accepted Answer · 2014-04-24 12:19:44Z

I have made it with the solution from SHAKIR SHABBIR.

Javascript

function updateThemeDropdown(str) {
    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("divTheme").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getthemes.php?q="+str,true);
    xmlhttp.send();
}

PHP (new file/site)

<?php
$q = intval($_GET['q']);

$host = "localhost";
$user = "root";
$pass = "";
$dbase = "la4s";

$db = mysqli_connect($host, $user, $pass, $dbase);

if (mysqli_connect_errno())
{
echo mysqli_connect_errno();
die ("Error");
}

$sql="SELECT * FROM theme WHERE sid = '".$q."'";
$getThemesOfThatSubject = mysqli_query($db,$sql);

echo '<select name="theme" size="1" id="type_select">';

while($ResultArray = mysqli_fetch_array($getThemesOfThatSubject)) {
echo '<option value="'.$ResultArray['tid'].'">'.$ResultArray['theme'].'</option>';
}
echo '</select>';

mysqli_close($db);
?>

It works!

SHAKIR SHABBIR · Accepted Answer · 2014-04-23 14:25:27Z

0

In PHP Code

<select name="subject" size="1" id="type_select" onchange="updateThemeDropdown(this)"> 
/*
Retrieve subject list from PHP
*/
</select>

<select name="theme" size="1" id="type_select">
/*
Keep it empty and fill it from updateThemeDropdown(this) in Javascript
*/
</select>

In Javascript Code

<script type="text/javascript"> 
function updateThemeDropdown(dropdownObject) {
    /*
        1- Read the dropdownObject and get the selected option
        2- Pass the selected option to another PHP Page that returns list of themes for the selected object via AJAX call
        3- Parse the returned object from AJAX call and set the options for "theme" dropdown

        You should research doing all this.
        Use JQuery for these steps
    */
}
 </script>

answered Apr 23, 2014 at 14:25

SHAKIR SHABBIR

1,2952 gold badges14 silver badges28 bronze badges

2 Comments

AlbertoGiorgino Over a year ago

I have problems to realize your solution. How I read the dropdownobject?

AlbertoGiorgino Over a year ago

I have it. Thanks four your help. I will post my solution in a new answer. thank you very much.

Collectives™ on Stack Overflow

PHP: How to change options in select element when changing the value in another select element?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related