javascript - ejemplos - mootools vs jquery

Cambiar la matriz de opciones de una lista de selección.

Question

¿Hay alguna manera de cambiar la matriz de opciones de una lista de selección html usando javascript o mootools?

Necesito reemplazar todo el conjunto de opciones por uno nuevo. En mi respuesta ajax recibí una matriz con las nuevas opciones de HTML, así que trato de vaciar la lista anterior y agregar nuevos valores de la siguiente manera

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

El código anterior me da una excepción no detectada en la línea dentro del bucle.

excepción no detectada: [Excepción ... "Error inesperado" nsresult: "0x8000ffff (NS_ERROR_UNEXPECTED)" ubicación: "marco JS

Sólo para agregar lo que funcionó para mí:

/* 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);
}

Answer 1

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

Demo

Answer 2

Manipule el DOM usando remove y add en el objeto seleccionado. Puede ver http://www.w3schools.com/jsref/dom_obj_select.asp para obtener más información.

Para agregar nuevas opciones a algún elemento de selección, he escrito el siguiente código:

/**
    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;
}

Answer 3

Solución de vainilla 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 ya tienes un conjunto de opciones.

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

Answer 4

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

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

Answer 5

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''));
});