javascript - 使用html和php的动态下拉列表

Question

我正在学习 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？

score 4 · Accepted Answer

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

将表格邮寄给自己（如您所愿）或
使用 ajax（可能通过 jQuery 快速）。

（这两个例子都没有说明你是如何访问数据库的）

1)

使用你的运行功能：

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

2)

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

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

score 2 · Accepted Answer

这是您代码的修改后的 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 等等。

javascript - 使用html和php的动态下拉列表

2 回答 2

Related

Reference