adding options to a select list

**hosdank** · 08-20-2008, 01:33 AM

I have an HTML SELECT tag, and I want to be able to insert an OPTION in to it at a given time. Please help. Thanks

**mburt** · 08-20-2008, 03:50 AM

This goes in the head.

Code:

<script type="text/javascript">
var addOption = function(el, value, selected) {
  var obj = document.getElementById(el),
    opt = document.createElement("option");
  opt.appendChild(document.createTextNode(value));
  opt.selected = selected;
  obj.appendChild(opt);
}
</script>

Give your select tag an ID:

Code:

<select id="foo"...

and use this after the select tag:

Code:

<script type="text/javascript">
addOption("foo", "New Text", false);
</script>

The last parameter indicates whether it will be selected or not.

**Nile** · 08-20-2008, 03:53 AM

Is this close to what your asking for?:

Code:

<script type="text/javascript">
function addNew(to,name,val){
var opt = new Option(name, val);
document.getElementById(to).add(opt, undefined);
}
</script>
<select id="x" size="5">
<option value="1">Dog</option>
<option value="2">Horse</option>
<option value="3">Tiger</option>
<option value="4">Lion</option>
</select>
<button onClick="addNew('x','Cat','5');this.disabled=true;">Add another</button>

The red should be in the <head> part of the document.

Edit: Mburt beat me to it, although I think my way is better.

**mburt** · 08-20-2008, 03:57 AM

*Sighs...

Code:

<script type="text/javascript">
var addOption = function(el, text, selected, value) {
  var obj = document.getElementById(el),
    opt = document.createElement("option");
  opt.appendChild(document.createTextNode(value));
  opt.selected = selected;
  opt.value = value;
  obj.appendChild(opt);
}
</script>

You shouldn't have to make a new object when you have document.createElement().

And what's that second parameter "undefined" for in add()?

**Nile** · 08-20-2008, 04:00 AM

The undefined is telling it to put the new options at the end of the select list. Null or undefined, they'll both wrok.

**mburt** · 08-20-2008, 04:02 AM

Either way, you don't need to create an object for this sort of thing. That's why we have document.createElement()

**Nile** · 08-20-2008, 04:03 AM

I was just making it off a script I made for someone a while ago:

Code:

<html>
<head>
<script type="text/javascript">
function putIn(to,from){
var x = document.getElementById(from);
var i = document.getElementById(to);
var opt = new Option(x.options[x.selectedIndex].text, x.options[x.selectedIndex].value);
i.add(opt, undefined);
x.remove(x.selectedIndex);
}
</script>
</head>
<body>
<select id="1" size="6" style="width:114px">
<option value="1">Cake</option>
<option value="2">Cookies</option>
<option value="3">Ice Cream</option>
<option value="4">Lolly Pop</option>
<option value="5">Chocolate</option>
<option value="6">Gummy Bears</option>
</select>
<button onClick="putIn(2,1)">Take Away</button><br />
<select id="2" size="6" style="width:114px">
</select>
<button onClick="putIn(1,2)">Put Back</button><br />
</body>
</html>

**mburt** · 08-20-2008, 04:06 AM

I see. Oh and you shouldn't use numbers as HTML ID's. Try doing something like: (I know, it's invalid)

Code:

alert(1.size);

It won't work... Best to use letters.

**Nile** · 08-20-2008, 04:08 AM

Again, it was an example, and wasn't used by anyone(as I think). So it doesn't matter.

**codeexploiter** · 08-20-2008, 04:15 AM

Another one

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Untitled Document</title>
		<style type="text/css">

		</style>		
	</head>
	<body>
		<div>
			<form name="form1">
				<select name="sel1" id="sel1">
					<option value="default">Default Content</option>
				</select>
				<input type="button" name="b1" value="Add Options" />
			</form>
		</div>
		<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"}];
		
		//Function responsible for the dynamic addition of options into the select list
		function addOptions(){
			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['form1'].elements['sel1'].appendChild(option);
			}
		}
		document.forms['form1'].elements['b1'].onclick = addOptions;
		</script>
	</body>
</html>

Thread: adding options to a select list

Thread Tools

Search Thread

adding options to a select list

The Following User Says Thank You to mburt For This Useful Post:

The Following User Says Thank You to Nile For This Useful Post:

The Following User Says Thank You to mburt For This Useful Post:

The Following User Says Thank You to Nile For This Useful Post:

The Following User Says Thank You to mburt For This Useful Post:

The Following User Says Thank You to Nile For This Useful Post:

The Following User Says Thank You to mburt For This Useful Post:

The Following User Says Thank You to Nile For This Useful Post:

The Following User Says Thank You to codeexploiter For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions