web-dev-qa-db-fra.com

Modifier le tableau d'options d'une liste de sélection

Existe-t-il un moyen de modifier le tableau d'options d'une liste de sélection html en utilisant javascript ou mootools?

Je dois remplacer l'ensemble des options par un nouveau. Dans ma réponse ajax, je reçois un tableau rempli avec les nouvelles options HTML, donc j'essaie de vider l'ancienne liste et d'ajouter de nouvelles valeurs comme suit

$('element').options.length=0;
for (i=0; i<newSet.length; i++)
{
    $('element').options[i]=newSet[i];
}

Le code ci-dessus me donne une exception non capturée sur la ligne à l'intérieur de la boucle.

exception non interceptée: [Exception ... "Erreur inattendue" nsresult: "0x8000ffff (NS_ERROR_UNEXPECTED)" emplacement: "Trame JS

Juste pour ajouter ce qui a fonctionné pour moi:

/* get new options from json*/
var new_options = response.options;

/* Remove all options from the select list */
$('idresource').empty();
/* Insert the new ones from the array above */
for (var key in new_options)
{
var opt = document.createElement('option');
    opt.text = new_options[key];
    opt.value = key;
    $('idresource').add(opt, null);
}
javascripthtmlmootools
24
Shakur
var new_options = ['Option 1', 'Option 2', 'Option 3'];

/* Remove all options from the select list */
$('yourSelectList').empty();

/* Insert the new ones from the array above */
$each(new_options, function(value) {
    new Element('option')
        .set('text', value)
        .inject($('yourSelectList'));
});
14
Björn

HTML

<select class="element">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<button><<<</button>

<select class="newSel">
    <option value="11">NewOne</option>
    <option value="22">NewTwo</option>
    <option value="33">NewThree</option>
</select>

Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

$("button").click(function(){
    var oldSel = $('.element').get(0);

    while (oldSel.options.length > 0) {
        oldSel.remove(oldSel.options.length - 1);
    }

    var newSel = $('.newSel').get(0);

    for (i = 0; i < newSel.length; i++)
    {
        var opt = document.createElement('option');

        opt.text = newSel.options[i].text;
        opt.value = newSel.options[i].value;

        oldSel.add(opt, null);
    }
})

Démo

14
amit_g
var newOptionsHtml = "<option value='2'>New Option 1</option><option value='3'>New Option 2</option>";

$("#test").html(newOptionsHtml);
10
cdkisa

Solution Vanilla JS

var arrOptions = [];
arrOptions.Push("<option value='' selected>Select from List...</option>");
arrOptions.Push("<option value='Trust Deposit'>Trust Deposit</option>");
arrOptions.Push("<option value='Operating Deposit'>Operating Deposit</option>");

document.getElementById("selectInput").innerHTML = arrOptions.join();

Si vous disposez déjà d'un ensemble d'options

var arrOptions = [];
var arrOptionsCollection = document.getElementById("check_typeInput").options;
for (var i=0, n = arrOptionsCollection.length; i < n; i++) { // looping over the options
    if (arrOptionsCollection[i].value) {
        arrOptions.Push("<option value='" + arrOptionsCollection[i].value + "'>" + arrOptionsCollection[i].text + "</option>");
    }
}
arrOptions.Push("<option value='Trust Deposit'>Trust Deposit</option>");
arrOptions.Push("<option value='Operating Deposit'>Operating Deposit</option>");

document.getElementById("selectInput").innerHTML = arrOptions.join();
4
Nicolas Giszpenc

Manipulez le DOM à l'aide de remove et add sur l'objet sélectionné. Vous pouvez voir http://www.w3schools.com/jsref/dom_obj_select.asp pour plus d'informations.

Pour ajouter de nouvelles options à un élément sélectionné, j'ai écrit le code suivant:

/**
    Adds an option to a select(HTML) element.
    @param {HTMLElement} select_element The select eletement.
    @param {string} option_str The text of the option.
    @param {Object} [option_attr] The options to be copied into the option element created.
    @returns {HTMLElement} The option element created.
*/
function addOptionStrToSelectElement(select_element, option_str, option_attr){
    if (!option_attr) option_attr = {};
    var doc = select_element.ownerDocument;
    var opt = doc.createElement("option");
    opt.text = option_str;
    for (var prop in option_attr){
        if (option_attr.hasOwnProperty(prop)){
            opt[prop] = option_attr[prop];
        }
    }
    doc = null;
    if (select_element.add.length === 2){
        select_element.add(opt, null); // standards compliant
    } else{
        select_element.add(opt); // IE only
    }
    return opt;
}
4
Prusse