adding options to a select list

**hosdank** · 08-21-2008, 09:21 PM

Wow... Thanks a lot guys!

That's what I want

**Nile** · 08-21-2008, 09:26 PM

Whos did you use? I suggest mburts.

**boogyman** · 08-22-2008, 04:09 PM

@codeexploiter

To expand on your example. I have made it a touch more generic to allow for multiple forms and multiple select elements be added without having to re-write the same function

This section goes in the <icode> tag

Code:

<script type="text/javascript">
	
//Function responsible for the dynamic addition of options into the select list
function addOptions(frm,selEl,butEl,opt){
	for(var i = 0; i < opt.length; i++){
		//Creating a new option
		var option = document.createElement("option");
		//Assigning option's value
		option.value = opt[i].Value;
		//Appending a text node to the newly created option with the text value
		option.appendChild(document.createTextNode(opt[i].Text));
		//Appending the new option to the select list
		document.forms[frm].elements[selEl].appendChild(option);
	}
}
</script>

this is the actual form definition

Code:

<form name="form1">
	<select name="sel1" id="sel1">
		<option value="default">Default Content</option>
	</select>
	<input type="button" name="b1" value="Add Options" />
</form>

and this section can either be put up in the <head> with the function or can be put above the <form> tag depending on preference.

Code:

var opt = [{"Text":"Dynamic1","Value":"d1"},{"Text":"Dynamic2","Value":"d2"},{"Text": "Dynamic3","Value": "d3"}];

document.forms[frm].elements[butEl].onclick = addOptions('form1','sel1','b1','opt');

where opt is the variable detailing the pre-set options to populate the appropriate form/select element.

and example of adding 2 pre-set options fields within 1 form

Code:

<head>
<script type="text/javascript">
//Function responsible for the dynamic addition of options into the select list
function addOptions(frm,selEl,butEl,opt){
	for(var i = 0; i < opt.length; i++){
		//Creating a new option
		var option = document.createElement("option");
		//Assigning option's value
		option.value = opt[i].Value;
		//Appending a text node to the newly created option with the text value
		option.appendChild(document.createTextNode(opt[i].Text));
		//Appending the new option to the select list
		document.forms[frm].elements[selEl].appendChild(option);
	}
}
</script>
</head>

<body>
<form name="form1">
	<select name="sel1" id="sel1">
		<option value="default">Default Content 1</option>
	</select>
	<input type="button" name="b1" value="Add Options" />
	<select name="sel2" id="sel2">
		<option value="default">Default Content 2</option>
	</select>
	<input type="button" name="b2" value="Add Options" />
</form>

<script type="text/javascript">
//Stored the text value pair of the new option going to be added in the select list
var opt = [{"Text":"Dynamic1","Value":"d1"},{"Text":"Dynamic2","Value":"d2"},{"Text": "Dynamic3","Value": "d3"}];
var opt2 = [{"Text":"Dynamic4","Value":"d4"},{"Text":"Dynamic5","Value":"d5"},{"Text": "Dynamic6","Value": "d6"}];

document.forms[frm].elements[butEl].onclick = addOptions('form1','sel1','b1','opt');
document.forms[frm].elements[butEl].onclick = addOptions('form1','sel2','b2','opt2');
</script>
</body>

to add another option on another form... well just change the first argument as well.

If you are looking for dynamic user-generated content than i would use something more like what mburt wrote

Thread: adding options to a select list

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions