Javascript Reference: Dropdown


Basics

To get values from any html object via javascript, you will need to assign an id to your object - to reference it from the DOM.

An easy way (and cross-browser friendly way) to retrieve the object is like this:

 
var Obj = document.getElementById('id')
 

Or you can pass the object by reference using the "this" keyword like in the example below:
 
<select name="dropdown" onchange="control(this)">
	<option value="">Please Select</option>
	<option value="123">test</option>
	<option value="456">test2</option>
</select>
 

using the onchange event, we will be able to control behavior when the user select an item from the dropdown. (force submit or whatever)

Get current selected item value

 
Obj.value;
 

Get current selected item text

 
Obj.options[Obj.selectedIndex].text
 

Add item to dropdown

 
Obj.options.add(new Option('text', 'value'))
 

Remove item from dropdown

 
Obj.remove(index)
 

index being the location of the item in the dropdown list

Remove all items from dropdown

 
Obj.options.length = 0
 

Quite strange isn't it?

Move items from one dropdown to another

 
function move(fromID,toID)
{
	var from = document.getElementById(fromID);
	var to = document.getElementById(toID);
 
	for (var i = 0; i < from.options.length; i++)
	{
		if (from.options[i].selected == true)
		{					
			to.options.add(new Option(from.options[i].text,from.options[i].value))
			from.remove(i);
			i--;
		}
	}
}
 

Move item up/down a dropdown

The following snippet will shift a selected option up/down a defined dropdown/listbox using javascript.

Usage:
 
<input type="button" onclick="shift('items', 'up')" value="Up" />
<input type="button" onclick="shift('items', 'down')" value="Down"/>
 

 
function shift(id, direction)
{
	var items = document.getElementById(id);
	var oldIndex = items.selectedIndex;
 
	if (oldIndex != -1)
	{	
		with (items)
		{
			if (direction == 'up')
				var newIndex = (oldIndex == 0) ? options.length - 1 : oldIndex - 1;
			else if (direction == 'down')
				var newIndex = (oldIndex == options.length - 1) ? 0 : oldIndex + 1;
			else
				return false;
 
			var a = new Option(options[oldIndex].text, options[oldIndex].value);
			var b = new Option(options[newIndex].text, options[newIndex].value);
			options[oldIndex] = b;
			options[newIndex] = a;					
			selectedIndex = newIndex;
		}
	}
}
 




Comments

Re: Dropdown

re: "An easy way (and cross-browser friendly way) to retrieve the object is" Keep in mind that this method is broken in IE, and that you may (on more complex pages) run into issues if you are not very careful. See this page for info: http://webbugtrack.blogspot.com/2007/08/bug-152-getelementbyid-returns.html and http://webbugtrack.blogspot.com/2007/09/bug-154-getelementbyid-is-not-case.html



W3C Standards

Thank you for your very valuable feedback Tyler What you're saying is indeed true, document.getElemenById isn't case sensitive at all (in IE), I don't want to defend Microsoft, but it isn't best practices to have anchors (and other elements for that matter) with the same names in your X/Html pages in anycase, even if they differ in case - this is a W3C standard, you'll even find a few IDEs that complain when you're trying this, VS2003/5 for example. http://www.w3.org/TR/html4/struct/links.html#h-12.2.1 So I don't really feel that document.getElementById is broken in IE (I believe Microsoft feels the same especially since they didn't really endeavor to "fix" this for the last hundred years) , I think its more a case of Microsoft interpreting how to enforce this standard in a different way than the mozilla codebase. You will find in IE that if you've got multiple anchors with the same name (including with different cases), that IE assumes that the first anchor with that identity, is the correct one - which forces the developer to adhere to this standard. In the mozilla codebase, they allow developers to ignore this standard - which isn't really a good thing at the end of the day. What is your feelings on this? I have to agree with Microsoft on this one (even though it makes me feel dirty saying it)





Post comment

Name *
Email
Title
Body *
Security code
*
* Required fields