使用html和php的动态下拉列表答案

【问题标题】：Dynamic drop down list using html and php使用html和php的动态下拉列表
【发布时间】：2013-09-19 01:01:53
【问题描述】：

我正在学习 html 和 php，我有一个 mysql DB 员工，其中有一个名为 Employees_hired 的表，其中存储 id、姓名、部门和合同类型。我想制作属于某个部门类型和特定合同类型的员工的下拉列表。在代码中会是这样的：

<html>      
<head>
    <title>Dynamic Drop Down List</title>
</head>
<body>
    <form id="form1" name="form1" method="post" action="<?php $_SERVER['PHP_SELF']?>">
        department: 
        <select id="department" name="department" onchange="run()">  <!--Call run() function-->
            <option value="biology">biology</option>
            <option value="chemestry">chemestry</option>
            <option value="physic">physic</option>
            <option value="math">math</option>     
        </select><br><br>
        type_hire: 
        <select id="type_hire" name="type_hire" onchange="run()">  <!--Call run() function-->
            <option value="internal">Intenal</option>
            <option value="external">External</option>                
        </select><br><br>
        list of employees:
        <select name='employees'>
            <option value="">--- Select ---</option>
            <?php
            mysql_connect("localhost","root","");
            mysql_select_db("employees_hired");
            $list=mysql_query("SELECT name FROM usuario WHERE (department ='". $value_of_department_list ."') AND (contrasena ='". $value_of_type_hire."')";);
            while($row_list=mysql_fetch_assoc($list)){
            ?>
            <option value="<?php echo $row_list['name']; ?>">
                <?php if($row_list['name']==$select){ echo $row_list['name']; } ?>
            </option>
            <?php
            }
            ?>
        </select>
    </form> 
</body>
</html>

我的问题是：如何从第一个下拉列表（type_hire和department）中获取选择的值用于查询并填写员工的下拉列表。我知道如何通过查询数据库（我在在线课程中学到的）来填充下拉列表，但我不知道如何从下拉列表中获取值并在实践中使用它们。我读到我可以使用“document.getElementById（”id“）。Value”将该值赋予查询中的变量，但没有详细解释如何。我是网络编程新手，我对 Javascript 的了解很差。谁能告诉我最好的方法来做到这一点？只能使用 html 和 php 还是必须使用 javascript？

【问题讨论】：

队长 jQuery 会在这里拯救你！学习它并处理 AJAX 请求。他们会让这变得轻而易举！ jquery.com
它会让你更容易更好地使用 ajax 和 jquery ，你不必制作内联 php
@CP510 我想你是对的，但我没有足够的经验或知识来理解 JQuery 或 JS。我是这个世界上的新手，伙计。
现在正在为您解答。
@CP510 我在互联网上找到了this 示例，但现在我在查询数据库时创建的问题多于答案？

标签： javascript php html html-select

【解决方案1】：

所以你有 onchange 在那里，这是一个开始。 onchange 引用了一个您未显示的 JavaScript 函数。有几种快速的方法可以解决这个问题：

将表单发布到自身（根据您的选择）或
使用 ajax（可能通过 jQuery 来提高速度）。

（这两个示例都没有说明您如何访问数据库）

使用你的运行函数：

<script type="text/javascript">
     function run(){
          document.getElementById('form1').submit()
     }
</script>

附加 PHP：

<?php
    if (isset($_POST['department']) && isset($_POST['type_hire']))
    {
        $value_of_department_list = $_POST['department'];
        $value_of_type_hire = $_POST['type_hire'];

        mysql_connect("localhost","root","");
        mysql_select_db("employees_hired");
        mysql_query("SELECT name FROM usuario WHERE (department ='". $value_of_department_list ."') AND (contrasena ='". $value_of_type_hire."')");

        while($row_list=mysql_fetch_assoc($list))
        {
            echo  "<option value=\"{$row_list['name']}\">{$row_list['name']}</option>";
        }
    }
    else
    {
        echo  "<option>Please choose a department and a type of hire</option>";
    }
?>

<script type="text/javascript">
     function run(){
          $.post('get_employees.php',$('form1').serialize(),function(data){

               var html = '';

               $.each(data.employees,function(k,emp){
                   $('select[name="employees"]').append($('<option>', {
                        value: emp.name,
                        text: emp.name
                    }));
               .html(html);
          },"json");
     }
</script>

而 get_employees.php 将包含如下内容：

<?php
if (isset($_POST['department']) && isset($_POST['type_hire']))
{
    $value_of_department_list = $_POST['department'];
    $value_of_type_hire = $_POST['type_hire'];
    $return = array();

    mysql_connect("localhost","root","");
    mysql_select_db("employees_hired");
    mysql_query("SELECT name FROM usuario WHERE (department ='". $value_of_department_list ."') AND (contrasena ='". $value_of_type_hire."')");

    while($row_list=mysql_fetch_assoc($list))
    {
        $return[]['name'] = $row_list['name'];
    }

    echo json_encode($return);
}
?>

请注意，这些只是快速编写的示例。这里可以/应该做更多的事情。

【讨论】：

【解决方案2】：

这是您代码的修改后的 jQuery 版本。（经过一些清理）

<html>      
<head>
     <title>Dynamic Drop Down List</title>
</head>
<body>
    <form id="form1" name="form1" method="post" action="<? $_SERVER['PHP_SELF']?>">
        department: 
        <select id="department" name="department" onchange="run()">  
            <!--Call run() function-->
            <option value="biology">biology</option>
            <option value="chemestry">chemestry</option>
            <option value="physic">physic</option>
            <option value="math">math</option>     
        </select><br><br>
        type_hire: 
        <select id="type_hire" name="type_hire" onchange="run()">  
            <!--Call run() function-->
            <option value="internal">Intenal</option>
            <option value="external">External</option>               
        </select><br><br>
        list of employees:
        <select name='employees'>
            <option value="">--- Select ---</option>
            <?php
            mysql_connect("localhost","root","");
            mysql_select_db("employees_hired");
            $list=mysql_query("SELECT name FROM usuario WHERE (department ='". $value_of_department_list ."') AND (contrasena ='". $value_of_type_hire."')";);
            while($row_list=mysql_fetch_assoc($list)){
            ?>
            <option value="<?php echo $row_list['name']; ?>">
                <? if($row_list['name']==$select){ echo $row_list['name']; } ?>
            </option>
            <?php
            }
            ?>
        </select>
    </form> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[ I'M GOING TO INCLUDE THE SCRIPT PART DOWN BELOW ]-->
</body>
</html>

现在我清理了标签，并使用 googleapis free cdn 添加了一个指向 jQuery 的热链接。接下来是实际的javascript。顺便提一句。不要在 PHP 中使用 MYSQL_* 函数。它们是折旧的。查看http://php.net/manual/en/mysqlinfo.library.choosing.php 了解更多信息。开始编写脚本...

<script type="text/javascript">
$('#type_hire').change(function() {
   var selected = $('#type_hire option:selected');  //This should be the selected object
   $.get('DropdownRetrievalScript.php', { 'option': selected.val() }, function(data) {
      //Now data is the results from the DropdownRetrievalScript.php
      $('select[name="employees"]').html(data);
   }
}
</script>

现在我只是徒手画的。但我会试着带你走过去。首先，我们获取我们想要观看的“选择”标签（主题标签意味着通过 ID 查找元素）。然后我们在其中获取选定的选项。接下来，我们运行 AJAX 调用以在您将创建的页面“DropdownRetrievalScript.php”上执行 GET。该脚本应该做的是获取 GET 变量“选项”并通过数据库运行它。然后让它回显“选项”标签。然后，我们的 javascript 内容获取这些结果并将它们直接插入到带有员工姓名属性的 select 标记中。

请记住，AJAX 就像将 URL 输入到浏览器中一样。因此，数据变量实际上就是 url 将显示的任何代码或文本。它可以是文本、HTML、JSON、XML 等等。

【讨论】：

我还是不明白 DropdownRetrievalScript.php 是什么
这将是一个单独的 php 文件，它将使用用户选择的选项来查询您的数据库。我只是随机调用它。但是该脚本将被提供一个$_GET['option'] 变量来检查选择了哪个选项。