Mahdi H
Mahdi H

Reputation: 339

Populate listbox php from another one using mysql

Hi i have this listbox in php populated using mysql

<?php

mysqli_query($con,"set character_set_server='utf8'");
mysqli_query($con,"set names 'utf8'");
$r=mysqli_query($con,"select id_livestream,name_match from Livestream");
?>
<br>تشكيلة مباراة :<select name=livestream size=1>
<?php 
while ($d=mysqli_fetch_array($r,MYSQLI_BOTH))

    {
        ?>

        <option value="<?=$d[0];?>"><?=$d[1];?></option>
        <?php 
    }
    ?>

</select>

How do i create and populate from mysql another listbox which based on the selected value from the first listbox ??

Any suggestions would be appreciated

Upvotes: 0

Views: 1521

Answers (1)

himak
himak

Reputation: 144

Assuming your second dropdwon data will be populated from database table and there is a foreign key relation to the livestream table.

I have tried using Ajax, I got below. please refer the attachment.Let me know if it works for you and accept my answer.

enter image description here

DisplayDropdown.php: This is the main page where you have a dropdown to select.

<?php
$con=mysqli_connect("localhost","UserName","","DatabaseName"); // Database connection


mysqli_query($con,"set character_set_server='utf8'");
mysqli_query($con,"set names 'utf8'");
$r=mysqli_query($con,"select id_livestream,name_match from Livestream");
?>

<html>
<head>
<script>
function getSubStream(str) {
    if (str == "") {
        document.getElementById("DivIDSubCategory").innerHTML = "";
        return;
    } else { 
        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 (this.readyState == 4 && this.status == 200) {
                document.getElementById("DivIDSubCategory").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","GetCategory.php?q="+str,true);
        xmlhttp.send();
    }
}


</script>
</head>
<body>

<form>

  Select Live Stream: <select name=livestream size=1 onchange="getSubStream(this.value)">
  <option value="select">Select</option>
<?php 
while ($d=mysqli_fetch_array($r,MYSQLI_BOTH))

    {
        ?>

        <option value="<?=$d[0];?>"><?=$d[1];?></option>
        <?php 
    }
    ?>

</select>
<br/>
<br/>
  <div id="DivIDSubCategory"></div>

</form>


</body>
</html>

GetCategory.php: Here we are creating a new dropdown based on the first dropdown selection

<?php
$con=mysqli_connect("localhost","UserName","","DatabaseName"); // Database connection
?>

<!DOCTYPE html>
<html>
<body>

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


mysqli_query($con,"set character_set_server='utf8'");
mysqli_query($con,"set names 'utf8'");


$sql = "SELECT subID,SubStreamName FROM substreams where livestreamID = '".$q."'";
$r=mysqli_query($con,$sql);


if(mysqli_num_rows($r) > 0) {
 echo "Select Sub Stream: <select name=substream><option value=Select>Select</option>";  

while ($d=mysqli_fetch_array($r,MYSQLI_BOTH))

    {
        ?>

        <option value="<?=$d[0];?>"><?=$d[1];?></option>
        <?php 
    }

echo "</select>";
}



mysqli_close($con);
  ?>
</body>
</html>

Some other resources:

Using PHP & MySQL to populate dropdown

Populate another select dropdown from database based on dropdown selection

How can i populate a dropdown list by selecting the value from another dropdown list

Upvotes: 1

Related Questions