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？

Answer 1

所以你有在那里的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);
}
?>

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

Answer 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变量“option”并在数据库中运行它。然后让它回显“选项”标签。然后我们的javascript东西会获取这些结果并将它们直接插入到具有employees名称属性的select标记中。

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

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

2 个答案: