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 :)
Printable View
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 :)
This goes in the head.
Give your select tag an ID: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>
and use this after the select tag:Code:<select id="foo"...
The last parameter indicates whether it will be selected or not.Code:<script type="text/javascript">
addOption("foo", "New Text", false);
</script>
Is this close to what your asking for?:
The red should be in theCode:<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>
<head>part of the document.
Edit: Mburt beat me to it, although I think my way is better.
*Sighs...
You shouldn't have to make a new object when you have document.createElement().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>
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.
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:
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>
I see. Oh and you shouldn't use numbers as HTML ID's. Try doing something like: (I know, it's invalid)
It won't work... Best to use letters.Code:alert(1.size);
Again, it was an example, and wasn't used by anyone(as I think). So it doesn't matter. :)
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>