Comment remplir par programme un élément de sélection avec des options en JavaScript ?-js tutoriel-php.cn

Comment remplir par programme un élément de sélection avec des options en JavaScript ?

Mary-Kate Olsen

Libérer： 2024-11-03 05:38:02

original

985 Les gens l'ont consulté

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

Ajout d'options à sélectionner avec JavaScript

En développant la fonction fournie, explorons plusieurs méthodes pour créer des options avec une plage de valeurs et ajouter les à un élément de sélection avec l'ID "mainSelect":

Méthode 1 :

Cette méthode introduit une boucle for améliorée qui crée par programme des options dans la plage souhaitée :

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

Copier après la connexion

Méthode 2 (Refactoring) :

Pour simplifier et améliorer la lisibilité, vous pouvez créer une fonction pour gérer ce processus :

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

Copier après la connexion

Méthode 3 (Chaînage) :

Enfin, vous pouvez étendre le prototype HTMLSelectElement avec une méthode "populate" :

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!