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

});