Question

我有一个显示一周（星期日到星期六）时间表的日程安排页面。

他们希望将员工添加到此计划中的方式是使用一系列弹出菜单，这些菜单会根据所选值进行更改。

例如，第一个菜单将是从我的数据库中的jobs表传播<option>值的作业。

现在说用户在“作业”弹出菜单中选择“库克”。下一个菜单“员工”将显示员工表中具有“烹饪”设置作业代码的所有员工。从而向我展示了当天可用的所有厨师。

制作这样一系列菜单的最佳方法是什么？

任何指向质量教程的链接都将受到赞赏。

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

构建动态弹出菜单的最佳方法

1 个答案: