構建dyanmic彈出菜單的最佳方式

Question

我有一個顯示一週（星期日到星期六）時間表的計劃頁面。

他們的方式我想添加員工到這個計劃是與一系列的彈出菜單，根據所選的值進行更改。

例如，第一個菜單將是Jobs，其<option>值從我的數據庫中的作業表傳播。

現在說一個用戶在Jobs彈出菜單中選擇'Cook'。下一個菜單'員工'將顯示員工表中所有員工代碼爲'cook'的員工。因此，向我展示當天所有的廚師。

製作這樣一系列菜單的最佳方法是什麼？

任何鏈接到質量教程將不勝感激。

Answer 1

你可以使用Javascript/AJAX來做到這一點。用戶從第一個菜單中選擇一個選項，然後下一個菜單自動更新選項，並向服務器發送請求，發送在第一個菜單上選擇的選項。

這可以用jQuery完成，我強烈建議您避免不同的瀏覽器問題。這是不完整的，但應該給你一個很大的開端：

HTML

<select id='jobs_menu' name='job'> 
    <option>Cook</option> 
    <option>Waiter</option> 
</select> 

<select id='employees_menu' name='employees'> 
    <option>John Doe</option> 
    <option>Doe John</option> 
    <option>Everyone else</option> 
</select> 

的Javascript/jQuery的

$(document).ready(function(){ 

    $('#jobs_menu').change (function() { 

     //ajax call 
     $.get('http://yourscript.com/script.php', { job: $('#jobs_menu').val() },  
      function() { 
       //parse the json and fill the #employees_menu with the results 
      }); 
    });  
}); 

PHP

if (isset ($_GET['job'])) 
{ 
    $names = array(); 
    $job = mysql_real_escape_string ($_GET['job']); 
    $res = mysql_query ("SELECT name FROM Employees WHERE job='$job'"); 

    while ($row = mysql_fetch_assoc ($res)) 
    { 
     $names[] = $row['name']; 
    } 

    echo json_encode ($names); 
}