Question

I have some javascript that generates a large list of <select> options (<option>) elements on the fly. And I need to be able to switch between 3 or 4 different generated lists based on the value of another <select> menu using an “onchange” event.

Is there a way I can store multiple lists of options and then just redirect the select object to the appropriate list as necessary?

Right now, I have to delete all the options and re-add them one at a time. That seems horribly wasteful / time consuming.

Answer 1

You could store the different lists of options as simple arrays, then do something like this:

function setThisSelect(selectId, optionsArray){
    var sel = document.getElementById(selectId);
    sel.options.length = 0;
    for (var i = 0; i < optionsArray.length; i++)
        sel.options.add(optionsArray[i]);
}

And here’s how you might create your options:

    var optionsArr1 = [];
    for (var i = 0; i < 5; i++) {
        var op = document.createElement("option");
        op.value = i;
        op.text = i;
        optionsArr1.push(op);
    }

Here’s a fiddle:

But if you’re wanting to do a lot of this, it might get tedious pretty quickly. This might be something a library like jQuery can help accomplish with a lot less code.