CODEWITHSUNDEEP
javascriptphpjqueryhtmlmysql
kross
kross

Reputation: 475

Two drop down list, second one populated with values in database

I need to make two drop down lists. Let's say the first one containing food categories: Ice Cream, Pizzas, Noodles, Milkshakes.

So if I pick ice cream the second drop down list would contain: Chocolate, Vanilla, Mint and so on. And if I pick Pizzas at the first one, I want this second one to change dynamically so that it would contain: Pepperoni, All Meat, and so on.

However, I need the second drop down list to be populated by the values I already have in my database. So let's say if I'm out of chocolate ice cream there would be no chocolate in the second drop down list. That is my desired outcome.

I am using HTML, PHP, JavaScript/jQuery, and MySQL so currently it's a webapp and these two drop down list are for me to delete values from the database. So let's say I want to delete Pepperoni from Pizzas, I would select Pizzas at the first drop down list and then Pepperoni at the second drop down list. Then I would click delete which would execute a js function to pass the parameters using ajax to PHP and then the delete query can be executed.

I am stuck on populating the second drop down list dynamically, any help on this? What I've done so far for the drop down is only:

                 <select id="tester_type">
                    <option value=""></option>
                    <option value="LMX">LMX</option>
                    <option value="LCX">LCX</option>
                    <option value="CAT">CAT</option>
                    <option value="J750">J750</option>
                    <option value="HPPS">HPPS</option>
                    <option value="HP93K">HP93K</option>
                    <option value="UFLEX">UFLEX</option>
                    <option value="IFLEX">IFLEX</option>
                    <option value="QRT">QUARTET</option>
                    <option value="TGR">TIGER</option>
                    <option value="ETS">ETS</option>
                    <option value="LEX">LEX</option>
                    <option value="HPLC">HPLC</option>
                    <option value="HPSS">HPSS</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>New Tester Name:</td>
        <td>
            <select id="tester_type">
                <!--Update list of available testers-->
            </select>
        </td>

Note: I just replaced the first drop down list as food category for a better understanding of my question by the way. Just take the first one as food categories and the second would be its type/flavors.

EDIT:

It doesn't display anything in the desired section/div in the window. Just a blank except for the title I have added in my HTML and other two buttons.

What I have done according to Brandon's answer:

In the HTML:

<html>
    <head>
        <title>Delete Tester</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <script language="javascript" type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="function.js"></script>
        <script type="text/javascript">displayDropDown();</script>
    </head>

    <body>
        <h3>Delete Tester</h3>
        <div id="drop_two_list"></div>
        <table class="deleteTable">
            <tr>
                <td/><td><br>
                    <input type="button" value="Cancel" onclick="window.close();"/>
                    <input type="button" name="send" value="Delete" onclick="deleteTester();"/>
                </td>
            </tr>
    </table>
    </body>
</html>

In the external javascript file:

function dislplayDropDown()
{
var page = "database.php";

$.post(page, {
    action : "dislplayDropDown"
    }, function(data) {
    $("div#drop_two_list").html(data);
    alert(data);
});

In the PHP:

function displayDropDown()
{
    $tester_info = "dummy_tester_list";
    $query_string = "select * from $tester_info";
    $result = @mysql_query($query_string) or die (mysql_error());
    $data = mysql_fetch_array($result) or die (mysql_error());

    echo "<select id=\"tester_type\">";
    while($data)
    {
        echo "<option value='$data['tester_type']'>$data['tester_type']</option>"; // first drop down
    }
    echo "</select>";

    $selected_tester_type = $_REQUEST['tester_type'];

    $query_string = "select * from $tester_info where tester_type = $selected_tester_type";
    $result = @mysql_query($query_string) or die (mysql_error());
    $data = mysql_fetch_array($result) or die (mysql_error());

    echo "<select>";
    while($data)
    {
        echo "option id=\"tester_name\" value='$data['tester_name']'>$data['tester_name']</option>"// second drop down
    }
    echo "</select>";
}

?>
<?php

$action = rtrim($_REQUEST['action']);

if($action=="insert")//This is for some other function
{
    $tester_type = rtrim($_REQUEST['tester_type']);
    $tester_name  = rtrim($_REQUEST['tester_name']);

    echo checkDuplicateTesterName($tester_type, $tester_name);
}
else if($action=="displayDropDown")
{
    echo displayDropDown();
}


?>

Here's the table structure as requested by Kentot, it's only the first five rows because there's more than 500 rows so I wouldn't want to put the whole thing here:

  id    tester_type   tester_name
   1        LMX          LMX-01
   2        LMX          LMX-04
   3        LMX          LMX-05
   4        LMX          LMX-06
   5        LMX          LMX-07

Upvotes: 0

Views: 1732

Answers (3)

Kentot
Kentot

Reputation: 542

Hai hzq I have made modification in your code for me to answer it cleaner:

your HTML:

 <?php

        $result = mysql_query("select * from dummy_tester_list");
        $data = mysql_fetch_array($result);

    ?>

    <select id="tester_type">
       <?php foreach($data as $d): ?>
        <option value="<?php echo $d["tester_type"]?>"><?php $d["tester_type"];?></option>
       <?php endforeach ?>                     
    </select>
<section id="tester_name">

</section>

     <h3>Delete Tester</h3>
        <table class="deleteTable">
            <tr>
                <td><div id="drop_two_list"></div></td>
            </tr>
            <tr>

                    <input type="button" value="Cancel" onclick="DELETE_TESTER_POPUP.close();"/>
                    <input type="button" name="send" value="Submit" onclick="deleteTester();"/>
                </td>
            </tr>
    </table>

Your PHP where you want to get the list of the selected tester type:

<?php
    $tester_type = $_POST["tester_name"];
    $query = mysql_query("select * from tester_info where tester_type = {$tester_type}");
    $select_dropdown;
    $select_dropdown .= "<select name='tester_lists'>";
    while($row = mysql_fetch_array($query)){
        $select_dropdown .= "<option>{$row["tester_name"]}</option>";
    }
    $select_dropdown .= "</select>";

    echo $select_dropdown;

?>

Your jquery when you change the tester name and get the equivalent tester list

$("body").on("change","#tester_type",function(){
        $.ajax({
            url: "dropdowns.php", // your php file
            type: "POST",
            data: tester_name: $(this).val(),
            success: function(data){
                $("#tester_name").html(data);
            } 
        });

   });

Upvotes: 1

Brandon Jake Sullano
Brandon Jake Sullano

Reputation: 335

you can try this one ..

<?php
function displayDropDown()
{
    $tester_info = "dummy_tester_list";
    $query_string = "select * from $tester_info";
    $result = @mysql_query($query_string) or die (mysql_error());
    $data = mysql_fetch_array($result) or die (mysql_error());

    echo "<select id=\"tester_type\">";
    while($data)
    {
        ?>
        <option><?php echo $data['tester_type']; ?></option>
   <?php
    }
    echo "</select>";

    $selected_tester_type = $_REQUEST['tester_type'];

    $query_string = "select * from $tester_info where tester_type = $selected_tester_type";
    $result = @mysql_query($query_string) or die (mysql_error());
    $data = mysql_fetch_array($result) or die (mysql_error());

    echo "<select>";
    while($data)
    {
    ?>
        <option><?php echo $data['tester_name']; ?></option>
    <?php
    }
    echo "</select>";
}

?>
<?php

$action = rtrim($_REQUEST['action']);

if($action=="insert")//This is for some other function
{
    $tester_type = rtrim($_REQUEST['tester_type']);
    $tester_name  = rtrim($_REQUEST['tester_name']);

    echo checkDuplicateTesterName($tester_type, $tester_name);
}
else if($action=="displayDropDown")
{
    echo displayDropDown();
}


?>

so we separate the tag to remove the error

Upvotes: 0

Brandon Jake Sullano
Brandon Jake Sullano

Reputation: 335

you can create this table say we will call this "menu"

food_id     |  food_type_flavor   |  food_category
--------------------------------------------
1           |   chocolate         |  ice cream
2           |   vanilla           |  ice cream
3           |   lemon             |  juice

and in your code you can create this 

$query = mysql_query("Select * from menu");
echo "<select name='food_category' >";
while($test = mysql_fetch_array($query))
{
   echo "<option value='$test['food_category']'>$test['food_category']</option>"; // first drop down
}
echo "</select>";

then when you select category you can get what was the food_category being selected and you can use that variable to make your second drop down

 $selected_category = $_POST['food_category'];

$query = mysql_query("Select * from menu where food_category ='$selected_category'");
echo "<select>";

while($test = mysql_fetch_array($query))
{


echo "<option name='food_flavor_type' value='$test['food_type_flavor]' >$test['food_type_flavor']</option>"; // second drop down
}
echo"</select>";

Upvotes: 1

Related Questions