30

Is there a way to change the options array of an html select list using javascript or mootools?

I need to replace the entire options set with a new one. In my ajax response I receive an array filled in with with the new HTML options, so I try to empty the old list and add new values as follows

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

The above code gives me an uncaught exception on the line inside the loop.

uncaught exception: [Exception... "Unexpected error" nsresult: "0x8000ffff (NS_ERROR_UNEXPECTED)" location: "JS frame

Just to add what worked for me:

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

5 Answers 5

20
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'));
});
2
  • 8
    There's a typo at $each(new_options.... It should be $.each, not $each.
    – Kevin
    Oct 11, 2013 at 23:50
  • 7
    @Kevin - this is for Mootools, not jQuery, so it's $each.
    – Björn
    Oct 12, 2013 at 13:16
16

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

15

Vanilla JS solution

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

If you already have a set of 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();
13
var newOptionsHtml = "<option value='2'>New Option 1</option><option value='3'>New Option 2</option>";

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

Manipulate the DOM using remove and add on the select object. You can see http://www.w3schools.com/jsref/dom_obj_select.asp for more info.

For add new options to some select element I have write the following code:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.