两个下拉列表，第二个填充数据库中的值答案

【问题标题】：Two drop down list, second one populated with values in database两个下拉列表，第二个填充数据库中的值
【发布时间】：2015-05-29 11:39:18
【问题描述】：

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

因此，如果我选择冰淇淋，第二个下拉列表将包含：巧克力、香草、薄荷等。如果我在第一个选择比萨，我希望第二个能够动态更改，以便包含：意大利辣香肠、全肉等。

但是，我需要用我在数据库中已有的值填充第二个下拉列表。因此，假设我没有巧克力冰淇淋，那么第二个下拉列表中将没有巧克力。这是我想要的结果。

我正在使用 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

【问题讨论】：

能贴出你的mysql表结构吗？
好的，刚刚发布。
请注意，除非有非常多的选项，否则在一个查询中获取整个数据集并处理应用程序代码（php 或 JavaScript）中的所有其他内容可能会更有效 - 直到提交按钮还是被按下了
@Strawberry 好的，但我该怎么做？你介意给我一个建议吗？我还在想办法。我得到的最接近我想要的答案是 Brandon 的答案。

标签： javascript php jquery html mysql

【解决方案1】：

你可以创建这个表说我们称之为“菜单”

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

【讨论】：

您的代码中似乎有一些错误。你是说echo "<option value=\"$test['food_category']\">$test['food_category']</option>"; // first drop down 吗？
@hzq 是的，它是 value = ' ' 而不是 value = " "
或者你可以像这样回显它：echo "";
嗯，有些地方似乎有问题，我会在几秒钟后发布编辑。

【解决方案2】：

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

   });

【讨论】：

嗯，我不认为我可以这样做。我在 ajax 中发送action 的原因（如我的编辑所示）是因为在我的 PHP 文件中我还有其他功能。 action 是告诉 PHP 文件执行哪个函数（如编辑的最后部分所示）。我的主要目的是让 HTML 文件只包含 HTML 代码，这样在用户在他/她的浏览器上查看源代码时会更安全（？）。
当用户查看您的源代码时，您的代码或脚本无法查看
哦，我明白了。但是真的有办法把 PHP 代码只放在 PHP 文件中吗？我真的希望 HTML 文件只包含 HTML 代码。 Brandon 的回答将是最接近我想要的，但只是我的 ajax（在编辑后的问题中）javascript 函数似乎没有执行。那里可能有错误或其他什么？
我在您的帖子中看不到任何 ajax 脚本
我的意思是 jQuery*，我的错。

【解决方案3】：

你可以试试这个..

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


?>

所以我们分开标签来消除错误

【讨论】：

嗯，似乎没有任何变化，也没有错误。我的 HTML 文件中的 displayDropDown(); 函数似乎没有执行。我的 ajax javascript 中可能有错误吗？
为什么你必须做一个js displayDropDown() 函数并在你的php中调用，当你可以直接用你的HTML制作它的时候？
我确实在我的 HTML 中调用了它。 js 和 PHP 中的两个函数只是同名而已。 jQuery 向 PHP 文件发送一个动作，它会读取并执行我想要的相应函数。那是因为我的 PHP 文件中不仅有这个函数，还有其他函数，所以我使用 action 变量来确定要执行的函数。
布兰登，你还能帮我吗？如果必须，我会逐字粘贴我的整个代码。我急需帮助。
我看到你正在使用纯 java 脚本嗯.. 让我检查你的代码