Динамический выпадающий список с использованием HTML и PHP

0

Я изучаю html и php, у меня есть сотрудники mysql DB, где есть таблица под названием Employees_hired, в которой хранятся идентификатор, имя, отдел и тип контракта. Я хочу создать раскрывающийся список сотрудников, которые относятся к типу отдела и конкретному типу контракта. В коде будет что-то вроде:

<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 "). Значение", чтобы указать это значение переменной в запросе, но нигде не объяснено подробно. Я новичок в веб-программировании, и мои знания Javascript плохи. Может ли кто-нибудь сказать мне лучший способ сделать это? Можно ли использовать только html и php, или я должен использовать javascript?

Теги:
html-select

2 ответа

2
Лучший ответ

Heres измененная версия 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>

Теперь я очистил теги и добавил hotlink для jQuery, используя бесплатный cdn googleapis. Далее - фактический javascript. Btw. НЕ ИСПОЛЬЗУЙТЕ MYSQL_ * ФУНКЦИИ В PHP. Они обесцениваются. Ознакомьтесь с 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>

Теперь я просто снял это с рук. Но я попробую и покажу тебе это. Сначала мы захватываем тег "select", который хотим посмотреть (хэштег означает поиск элемента по ID). Затем мы возьмем выбранную опцию. Затем мы запускаем вызов AJAX для создания GET на странице "DropdownRetrievalScript.php", которую вы создадите. То, что должен сделать этот сценарий, это взять параметр GET "option" и запустить его через базу данных. Затем повторите теги "option". Наш материал javascript затем берет эти результаты и подключает их непосредственно к тегу select с атрибутом name для сотрудников.

Помните, что AJAX похож на ввод этого URL-адреса в ваш браузер. Таким образом, переменная данных - это буквально любой код или текст, отображаемый URL-адресом. Это может быть текст, HTML, JSON, XML, что угодно.

Поделиться
  • 0
    Я до сих пор не понимаю, что такое DropdownRetrievalScript.php
  • 0
    Это будет отдельный php-файл, который будет запрашивать вашу базу данных, используя опцию, выбранную пользователем. Я просто назвал это случайным образом. Но этот сценарий получит переменную $_GET['option'] чтобы проверить, какая опция была выбрана.
4

Таким образом, у вас есть onchange и это начало. Onchange ссылается на функцию JavaScript, которую вы не показываете. Есть несколько быстрых способов приблизиться к этому:

  1. Отправьте форму себе (как вы выбрали) или
  2. используйте 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);
}
?>

Заметьте, это просто быстро написанные примеры. Намного больше можно/нужно сделать здесь.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню