Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
261 views
in Technique[技术] by (71.8m points)

javascript - Dynamic drop down list using html and php

I'm learning html and php, I have a mysql DB employees where there is a table called Employees_hired, which stores id, name, department and type of contract. I want to make a drop down list of employees who belong to a type of department and a specific contract type. In the code would be something like:

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

The question I have is: how to get the selected values ??from the first drop-down lists (type_hire and department) for use in the query and fill the drop down list of employees. I know how to fill a dropdown list by querying the DB (what I learned in an online course) but I do not know how to take the values ??from the dropdown lists and use them in my practice. I read that I can use "document.getElementById (" id "). Value" to give that value to the variable in the query, but nowhere explained in detail how. I am new to web programming and my knowledge of Javascript are poor. Can anyone tell me the best way to do this?. It is possible only using html and php or I have to use javascript?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

So you have the onchange in there and that's a start. The onchange is referencing a JavaScript function that you don't show. There are a couple quick ways to approach this:

  1. Post the form to itself (as you have chosen) or
  2. use ajax (possibly via jQuery for quickness).

(both of these examples don't address how you are accessing the database)

1)

Using your run function:

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

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

And get_employees.php would contain something like:

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

Note, these are just quickly written examples. A lot more could/should be done here.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...