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

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

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

источник

2013-09-19 franvergara66

Капитан jQuery спасет вас здесь! Изучите его и получите доступ к запросам AJAX. Они сделают это ветерок! http://jquery.com/ – CP510

Это упростит и улучшит использование ajax и jquery, вам не нужно делать inline php –

@ CP510 Я думаю, вы правы, но у меня недостаточно опыта или знаний, чтобы понимать JQuery или JS. im новичок в этом мире чувак. – franvergara66

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, используя googleapis бесплатного CDN. Далее - фактический 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, что угодно.

источник

2013-09-19 01:18:17 CP510

Я до сих пор не понимаю, что такое DropdownRetrievalScript.php – franvergara66

Это будет отдельный php-файл, который будет вызывать вашу базу данных с помощью выбранной пользователем опции. Я просто назвал это случайным образом. Но этот скрипт будет загружен переменной '$ _GET ['option']', чтобы проверить, какой вариант был выбран. – CP510

Итак, у вас есть он-лайн, и это начало. 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); 
} 
?>

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

источник

2013-09-19 01:26:36 user1056677

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

ответ

Смежные вопросы