How can I add a new option to a drop down list?

**celia05es** · Jan 31, 2007 09:29

Hello,
How can I add a new option to a drop down list?.
I have a form made of:
- a drop down list.
- an input field where the user can enter a value. Once the user clicks on the "modify" button, the value entered shoud be added to the list.
How can I do it?

Code:

<form onSubmit="return false" method="post" name="my_form" action="">
<table>
<tr>
<td>
<SELECT NAME="my_list">
<option value="toto" >toto</option>
<option value="titi">titi</option>
<option value="Other...">Other...</option>
</SELECT>
</td><tr>
<td><input type=text name=new_value></td>
<td><input type=button onclick=addNewValue(this) name="modify"</td>
</table> 
</form>

**jimfraser** · Jan 31, 2007 11:59

I'd fix up these two lines like this:

Code:

<td><input type="text" name="new_value"/></td>
<td><input type="button" onclick="addNewValue(this);" name="modify"/></td>

then you can add this function to do the work

Code:

function addNewValue(el) {
	var list = el.form.elements["my_list"];
	var entry = el.form.elements["new_value"];
	
	var opt = document.createElement("option");
	opt.value = entry.value;
	opt.appendChild(document.createTextNode(entry.value));
	
	// assuming you want "Other..." to remain the last element
	var other = list.options[list.options.length - 1];
	list.insertBefore(opt,other);
	
	entry.value = "";

}

**celia05es** · Feb 1, 2007 05:47

Thank you so much for the code!!! It is exactly what I was looking for!!!

**celia05es** · Feb 1, 2007 06:23

One more question... I have modified the routine so it does what I want... the select name can be found in "cur_type" and the name of the field is "new_type"...and my question is: How can the new option remained the first one?
[CODE]
function addNewValue()
{
var list = document.forms[0].elements[cur_type];
var entry = document.forms[0].elements["new_"+cur_type]

var opt = document.createElement("option");
opt.value = entry.value;
opt.appendChild(document.createTextNode(entry.value));

// assuming you want "Other..." to remain the last element
var other = list.options[list.options.length - 1];
list.insertBefore(opt,other);

entry.value = "";
}

**jimfraser** · Feb 1, 2007 06:50

You want the new option to appear first on the list? sure.

change
var other = list.options[list.options.length - 1];
to
var other = list.options[0];

**celia05es** · Feb 1, 2007 07:31

THanks but it still does not do exactly what I want!. Is there a way of making this value "selected"?
WHat I do exactly is the following:
THere is a select list with the "other" option. If the user clicks on the "other" option, a new field appears and he can enter somethings. Once he clicks on "Modify" button, some checks are run and this option is added to the list BUT this option should appear now as the selected option.

Thanks again for your help and patience

**jimfraser** · Feb 1, 2007 07:36

var other = list.options[0];
list.insertBefore(opt,other);
list.selectedIndex = 0;

**celia05es** · Feb 1, 2007 07:37

I mean that the drop down menu is correct (selected option first) but in the selected field.... the "other..." option still appears and I need it to be "the new option".
THanks

**celia05es** · Feb 1, 2007 07:40

It works just fine!!!! Thank you so much!!

Just one more thing.... the list at the beginning was sorted alphabetically.... is there an easy way to have it sorted after the option is entered?

**celia05es** · Feb 1, 2007 07:41

Sorry the question is not clearly asked.... I mean new options can be added and at the end I would still like the whole list ordered. is there a simple way to do so?

**jimfraser** · Feb 1, 2007 08:16

Hrm...

the list at the beginning was sorted alphabetically

No it wasn't! toto comes AFTER titi if that's the case. Anyway, assuming it should be sorted initially...

Code:

<html>
<head>
<script type="text/javascript">
var cur_type = "theList";

function addNewValue(el) {
	var list = el.form.elements[cur_type];
	var entry = el.form.elements["new_" + cur_type];
	
	var opt = document.createElement("option");
	opt.value = entry.value;
	opt.appendChild(document.createTextNode(entry.value));
	
	// insert the new option alphabetically
	var insertLocation = -1;
	for (var i=0; i < list.options.length - 1; i++) {
		if (list.options[i].value > entry.value) {
			insertLocation = i;
			break;
		}
	}
	if (insertLocation == -1) {
		insertLocation = list.options.length - 1;
	}
	
	var other = list.options[insertLocation];
	list.insertBefore(opt,other);
	list.selectedIndex = insertLocation;
	
	entry.value = "";

}
</script>
</head>
<body>
<form onSubmit="return false" method="post" name="my_form" action="">
<table>
<tr>
<td>
<SELECT NAME="theList">
<option value="titi">titi</option>
<option value="toto">toto</option>
<option value="Other...">Other...</option>
</SELECT>
</td><tr>
<td><input type="text" name="new_theList"/></td>
<td><input type="button" onclick="addNewValue(this);" name="modify"/></td>
</table> 
</form>
</body>
</html>

**celia05es** · Feb 1, 2007 08:25

Mea culpa!!! That's right the list wasn't sorted but it was meant to be!!
Thank you so much for your help!

User Tag List

Thread: How can I add a new option to a drop down list?

Thread Tools

Display

How can I add a new option to a drop down list?

Bookmarks

Bookmarks

Posting Permissions