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.
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()?
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() :)
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.
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
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
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.