Question

是否必须从数据库中调用所有动态下拉菜单？我想在我的最新项目中加入一个，虽然我不知道该怎么做，但在从谷歌搜索后，我发现几乎所有人都在谈论MySQL。我在想<select name="">就足够了。

Answer 1

嗯，显然有替代方案，你可以使用PHP来读取文件（XML很适合配置文件），然后使用数据生成菜单或只生成基于数组的下拉菜单等等。你应该做什么显然取决于你正在做什么。基本上，重点在于您将数据存储在某个位置（数组，文件，数据库......），然后检索它并构建菜单。

编辑：要说明，我不是说你应该使用XML文件等来获取动态内容。

Answer 2

要看一些有趣的事情是Google Fusion Tables。

无论如何，在某些时候你必须依赖数据库。

Answer 3

MySQL是许多PHP应用程序的不错选择，因为它们可以很好地协同工作。此外，非常多的托管服务提供商托管MySQL。再加上您拥有的Google体验，您可以看到许多人使用它的原因。另外，MySQL是一个非常好的数据库系统，可以自由启动。

但是，您可以按照自己的方式构建下拉菜单。但是，迟早你会希望有一些方法来存储你所有网站的数据，然后以某种方式将它们变成下拉项目，使用数据库系统是一个很好的方法。原因是数据库为您处理恼人的文件打开和搜索代码，因此您可以专注于您自己的数据。

编辑：一个好的数据库系统将使您的数据变得非常容易。通过单一陈述，可以轻松地让班上所有人的平均成绩在B和C之间。或者根据他们的成绩，一个声明来确定女孩是否真的比男孩更聪明。或者按年龄，年级或两者获得学生人数列表。在纯PHP中，与MySQL需要的单个查询相比，这需要相对大量的代码。

Answer 4

数据库绝对有用，但并非严格要求。

我有一个jQuery javascript我经常用于动态下拉菜单。它从javascript变量（json对象）更新下拉列表。大多数情况下，我是从数据库生成的，但如果站点不使用数据库，则可能会进行硬编码。

编辑（添加解释）

我已经更新了示例代码，使其与您的应用程序更加相关（只知道它与类和会话有关。该示例具有动态下拉列表，如下所示：

选择课程
选择学期
- 根据课程的不同，某些课程可能有多个选项，或者只在一个特定的学期中运行。也是一个不适用学期的“全年项目”。
选择日间/夜间课程
- 这可能只适用于某些课程

（动态的几个层次，只是为了覆盖脚本功能）

现在实施。我们在页面顶部包含一个脚本（+ jQuery，脚本所依赖的）。然后我们有HTML，我们只需要带有名称和id的空选择字段。动态选项由javascript处理。

onload是唯一需要为应用程序修改的javascript。我们有一个带有id，parent_id和display的'option'对象数组。

jquery onload函数将选项添加到下拉列表中，如果课程更改，则学期下拉列表应更新，如果学期下拉列表，则更新时间下拉列表。

脚本有一个额外的属性，因为它隐藏了字段，如果给定选择没有相关选项，则它是标签。

可以在这里查看包含这些部分的完整html页面：http://snipt.org/Uul0（只需要一个html文件来演示它）

因此，这显示了如何在没有数据库的情况下轻松创建动态下拉列表，甚至没有服务器端代码（PHP）。这纯粹是JQuery和HTML）。现在，那就是说，我不是说你没有数据库会更好，只是动态下拉不是严格要求的。

对不起，这已经是一篇很长的文章了。这就是我要提供的全部内容。

附带的脚本

function loadOptions(jquery_identifier, options, parent_id)
{
    var $select = jQuery(jquery_identifier),
        i, option;
    $select.children().remove();

    if (typeof(options)=='object'&&(options instanceof Array))
    {
        var toAppend = [];
        var toAppendIndex = 0;

        for (i = 0; i < options.length; i++)
        {
            option = options[i];

            if (option.parent_id == parent_id)
            {
                // repeatedly appending to select was too slow, instead
                // appending to array and appending to select once at the end using toAppend.join
                toAppend[toAppendIndex++] = "<option value='";
                toAppend[toAppendIndex++] = option.id;
                toAppend[toAppendIndex++] = "'>";
                toAppend[toAppendIndex++] = option.display;
                toAppend[toAppendIndex++] = "</option>";
            }
        }

        if (toAppendIndex > 0)
        {
            $select.append("<option value='' selected='selected'>- Select -</option>").append(toAppend.join(''));
            $select.parent('.field').show();
        }
        else
        {
            $select.parent('.field').hide();
        }
    }

    $select.change();
}

样本用法

HTML

<div class='field'>
    <label for='course'>Course</label>
    <select name='course' id='course'></select>
</div>

<div class='field'>
    <label for='semester'>Semester</label>
    <select name='semester' id='semester'></select>
</div>

<div class='field'>
    <label for='time'>Time</label>
    <select name='time' id='time'></select>
</div>

onload

var dynamic_options = [
    {"id":"1","parent_id":"0","display":"Database fundamentals"},
        {"id":"2","parent_id":"1","display":"Semester 1"},
        {"id":"3","parent_id":"1","display":"Semester 2"},
            {"id":"4","parent_id":"3","display":"Daytime classes"},
            {"id":"5","parent_id":"3","display":"Evening classes"},
    {"id":"6","parent_id":"0","display":"Games technology"},
        {"id":"7","parent_id":"6","display":"Semester 1"},
        {"id":"8","parent_id":"6","display":"Semester 2"},
    {"id":"9","parent_id":"0","display":"Industry project (full year)"}
];


jQuery(function(){

    // initialise course dropdown with the choices with no parent (parent_id = 0)
    loadOptions('#course', dynamic_options, 0);

    // if course changes update semester dropdown with the appropriate child options
    jQuery('#course').change(function() {
        loadOptions('#semester', dynamic_options, jQuery(this).val());
    }).change();

    // if level 2 changes update level 3 with the appropriate child options
    jQuery('#semester').change(function() {
        loadOptions('#time', dynamic_options, jQuery(this).val());
    }).change();

});

动态下拉菜单

4 个答案:

样本用法