两个下拉列表，第二个下载列表中填充了数据库

时间：2015-05-27 00:27:09

标签： javascript php jquery html mysql

我需要制作两个下拉列表。让我们说第一个包含食物类别：冰淇淋，比萨饼，面条，奶昔。

因此，如果我选择冰淇淋，第二个下拉列表将包含：巧克力，香草，薄荷等。如果我在第一个选择Pizzas，我希望第二个Pizzas动态变化，以便它包含：Pepperoni，All Meat等等。

但是，我需要第二个下拉列表由我在数据库中已有的值填充。所以，假设我没有巧克力冰淇淋，那么第二个下拉列表中就没有巧克力了。这是我期望的结果。

我正在使用HTML，PHP，JavaScript / jQuery和MySQL，所以目前它是一个webapp，这两个下拉列表是我从数据库中删除值。所以我想说我想从Pizzas中删除Pepperoni，我会在第一个下拉列表中选择Pizzas，然后在第二个下拉列表中选择Pepperoni。然后我会点击删除执行js函数将ajax传递给PHP，然后执行删除查询。

我被动态填充第二个下拉列表，对此有什么帮助？我到目前为止所做的只是下拉：

                 <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>

注意：我刚刚将第一个下拉列表替换为食物类别，以便更好地理解我的问题。只需将第一个作为食品类别，第二个作为其类型/口味。

编辑：

它不会在窗口中的所需部分/ div中显示任何内容。除了我在HTML和其他两个按钮中添加的标题外，只是空白。

根据布兰登的回答我做了什么：

在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>

在外部javascript文件中：

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

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

在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();
}


?>

这是Kentot要求的表格结构，它只有前五行，因为有超过500行，所以我不想把整个事情放在这里：

  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

3 个答案:

答案 0 :(得分：1)

您可以创建此表格，我们将调用此菜单＆＃34; 

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

在您的代码中，您可以创建此

$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>";

然后当您选择类别时，您可以获得所选择的food_category，您可以使用该变量进行第二次下拉

 $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>";

答案 1 :(得分：1)

Hai hzq我已经修改了你的代码，让我更清楚地回答：

你的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>

您想要获取所选测试人员类型列表的PHP：

<?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;

?>

更改测试人员名称并获得等效测试人员名单时的jquery 

$("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);
            } 
        });

   });

答案 2 :(得分：0)

你可以尝试这个...... 

<?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();
}


?>

因此我们将标记分开以删除错误

相关问题
最新问题