Dynamic Dropdown Menus

Question

Is it compulsory that all dynamic dropdown menus must be called from the database? I want to include one for my latest project, although I dont know how to do it, but after searching from Google, I found that almost everyone was talking about MySQL. I was thinking <select name=""> would be enough.

Answer 1

A database is definitely useful, but not strictly required.

I have a jQuery javascript I often use for dynamic drop-downs. It updates the drop-downs from a javascript variable (json object). Most often I generate this from a database, but it could be hard coded if the site doesn't use a database.

Edit (adding explaination)

I've updated the sample code to be somewhat more related to your application (only knowing it relates to classes and sessions. The example has dynamic dropdowns as follows:

• Select course
• Select the semester
  • Depending on the course some course may have multiple options or only run in one particular semester. Also a 'full year project' for which semester is not applicable.
• Select daytime/evening classes
  • This may only be applicable to some courses

(A few levels of dynamic, just to cover the script capabilities)

Now the implementation. We include a script at the top of the page (+ jQuery, which the script depends on). Then we have the HTML, we only need empty select fields with names and ids. The dynamic options are handled by the javascript.

The onload is the only javascript that needs to be modified for the application. We have an array of 'option' objects with their id, parent_id, and display.

And the jquery onload function adds the options into the dropdown and if course changes then semester dropdown should update, and if semester dropdown then time dropdown is updated.

The scripts has one additional property in that it hides the field and it's label if there are no related options for a given selection.

A complete html page combining these parts can be viewed here: http://snipt.org/Uul0 (Just sav to an html file to demo it)

So this shows how you can easily create dynimic dropdowns without a database and even without server side code (PHP). This is purely JQuery and HTML). Now, that said, I'm not saying you are better off without a database, just that it's not strictly needed for dynamic dropdowns.

Sorry this is already a long essay. That's all I have to offer here.

The included script

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

Sample usage

The 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>

The 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();

});

Answer 2

Well, there are obviously alternatives to this, you can use PHP to read a file (XML is popular for configuration files) and then use the data to generate the menu or just generate the dropdown menu based on an array and so on. What you should do obviously depends on what you are working on. Basically the point is that you have data stored somewhere (an array, file, database...) and then you retrieve it and build the menu.

EDIT: To specify, I'm not saying you should use XML file etc. for dynamic content.

Answer 3

MySQL is a good choice for many PHP applications, because they work well together. Also, extremely many hosting providers host MySQL. Add to that you own Google experience and you can see why many people use it. Plus, MySQL is a very good database system, which is free to boot.

However, you can build your drop down menus any way you want. However, sooner or later you'll want to have some way of storing all your site's data, and then turn those into drop down items somehow, and using a database system is a good way to go. The reason is that a database handles annoying file opening and searching code for you, so you can focus on your data itself.

EDIT: a good database system will make your data juggling life very easy. It's easy to get all the people in the class with an average grade between a B and a C with a single statement. Or one statement to find out whether girls really are smarter than boys, based on their grade. Or to get a list of the number of students by age, by grade, or both. In pure PHP this takes a relatively large amount of code, compared to the single query that MySQL needs.

Answer 4

Something interesting to take a look is Google Fusion Tables.

Anyway, at some point you'll have to rely on a DB.