Javascript created selectbox with number selections in multiples

16Jun09

Creating a javascript select box with numbered selections in multiples:

var i;
var totalRows = 20;
var selectBox = document.getElementById('thisSelect');
for (i = 1; i < = totalRows; i++ ){
	if( (i % 5) == false ){
		var newOption = new Option(i, i);
		selectBox.options.add(newOption);
	}
}

What's going on?

Initialize variables:

var i;
var totalRows = 20;
var selectBox = document.getElementById('thisSelect');
var newOption;

Loop over total rows:

for (i = 1; i <= totalRows; i++ ){
...
}

Check if the current number divided by five returns 0 (loosely false).

if( (i % 5) == false){
...
}

If so, add new option. Then add to selectbox:

newOption = new Option(i, i);
selectBox.options.add(newOption);

*Alternatively use the DOM when creating the option by using CreateElement.

Result
5
10
15
20

How to add "all" selection?

newOption = new Option('All [' + totalRows + ']', totalRows);
selectBox.options.add(newOption);

Final result
All
5
10
15
20


Filed under: Beginner, Javascript   |  Leave a Comment