Setting elements of a listbox through JavaScript

Question

How do I set the individual elements of a listbox jsf generated for me ? I want to set it through JS.

HTML generated: <select id="pageForm:effectiveDateListbox" name="pageForm:effectiveDateListbox" multiple="multiple" size="0"></select>   

var listBox = document.getElementById('pageForm:effectiveDateListbox');
            for (i = 0; i!= length; i++) 
            {
                var date = arrDates[i];
                var displayMonth = date.getMonth() + 1;
                var displayYear = date.getFullYear();
                var displayDate = date.getDate();
                tokenizedDates = displayMonth.toString(10) + "/" + displayDate.toString(10) + "/" + displayYear.toString(10);
                listBox.options[i].value = tokenizedDates;
                i++;
            }

You don't need the `i++` at the end of your loop as the loop itself will increment it. — Justin Helgerson, Apr 21 '13 at 00:36

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

in the loop length should be arrDates.length

don't double increment i

declare i and tokenizedDates with var or you pollute the global namespace

Here is the link for doing dom manipulations: http://www.w3schools.com/jsref/met_select_add.asp

Here is how to do it with jquery because dom manipulations are tricky to get them to work cross browser:

Adding options to a <select> using jQuery?

edited May 23 '17 at 11:50

Community

1
1

answered Apr 21 '13 at 00:41

MatthewMartin

32,326
33
105
164

zero7 · Answer 2 · 2013-04-21T01:13:52.380

var listBox = document.getElementById('pageForm:effectiveDateListbox');
var dates = [new Date(2013,01,01), new Date(2013,02,03), new Date(2013,03,03)];    
for (i = 0; i != dates.length; i++) {
    var option = document.createElement("option");
    var optionText = [dates[i].getMonth() + 1, dates[i].getDate(), dates[i].getFullYear()];
    option.text = optionText.join("/");
    listBox.add(option, null);
}

Setting elements of a listbox through JavaScript

2 Answers2