Selecting an option with JavaScript

Normally you would select an option with a server-side script like PHP which is a lot faster and doesn't require the client's browser to do the work. But on the rare occasion where you need to set an option with JavaScript, here's a small script on how to do it.

 
document.getElementById('select_box_id_here').value 
 = 'the value of the one you want selected';
 

This will work if you have constructed the page the proper way. On the odd chance you've used JavaScript to pull in a whole string of HTML then use the method below.

 
var selectBox = document.getElementById('select_box_id_here');
for(i=0; i<selectBox.options.length; i++) {
	if(selectBox.options[i].value == a_value) {
		selectBox.options[i].selected = true;
		i = selectBox.options.length;
	}
}
 

The above script simply loops through your select box and determines if the current option (in the loop) matches the value (a_value), if so then set the option to selected. The line "i = selectBox.options.length;" simply stops the 'for loop' from checking any further options.

The reason why you have to manually go through the select box yourself is because the DOM doesn't actually know the select box is on the page when you've just dumped a whole lot of HTML into the page with JavaScript. If it's possible to refresh the DOM then let me know, otherwise the above option is the solution to this problem.