PDA

View Full Version : 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.

<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:

<select id="foo"...
and use this after the select tag:

<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?:


<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.
Mburt beat me to it, although I think my way is better.

mburt
08-20-2008, 03:57 AM
*Sighs...

<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:

<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)


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



<!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>

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

<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


<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.


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


<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