How to Programmatically Populate a Select Element with Options in JavaScript?

Adding Options to Select with JavaScript

Expanding on the provided function, let's explore several methods to create options with a range of values and add them to a select element with ID "mainSelect":

Method 1:

This method introduces an improved for loop that programmatically creates options within the desired range:

<code class="javascript">var min = 12;
var max = 100;
var select = document.getElementById('mainSelect');

for (var i = min; i <= max; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    select.appendChild(opt);
}</code>

Method 2 (Refactoring):

To simplify and enhance readability, you can create a function to handle this process:

<code class="javascript">function populateSelect(target, min, max){
    if (!target){
        return false;
    }
    else {
        var min = min || 0;
        var max = max || min + 100;

        var select = document.getElementById(target);

        for (var i = min; i <= max; i++){
            var opt = document.createElement('option');
            opt.value = i;
            opt.innerHTML = i;
            select.appendChild(opt);
        }
    }
}</code>

Method 3 (Chaining):

Finally, you can extend the HTMLSelectElement prototype with a "populate" method:

<code class="javascript">HTMLSelectElement.prototype.populate = function (opts) {
    var settings = {};

    settings.min = 0;
    settings.max = settings.min + 100;

    for (var userOpt in opts) {
        if (opts.hasOwnProperty(userOpt)) {
            settings[userOpt] = opts[userOpt];
        }
    }

    for (var i = settings.min; i <= settings.max; i++) {
        this.appendChild(new Option(i, i));
    }
};</code>

The above is the detailed content of How to Programmatically Populate a Select Element with Options in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!