Javascript Reference: Dropdown - Introduction



To retrieve the dropdown object you can assign an id to it which will enable you to access it from the DOM like this:

 
var Obj = document.getElementById('id')
 
(Note: In Firefox element IDs are case-sensitive - which is not the case in Internet Explorer)

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

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






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

Note that your comment won't appear immediately (it will be moderated)

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

Latest Articles

C# : Snippets


Collection of C# snippets
2010-05-22 01:06:19

MS SQL : Snippets


Collection of MS SQL snippets
2010-05-22 00:55:15

JavaScript : Snippets


Collection of JavaScript snippets
2010-05-22 00:37:57

ASP.net: Snippets


Collection of ASP.net snippets
2010-05-22 00:29:56

PHP: Snippets


Collection of PHP snippets
2010-05-22 00:06:45

Parallel Language Reference : Strings


a Parallel reference of programming languages
2009-09-10 12:48:23

PHP Tutorial: Developing a Login – Part 1


a tutorial explaining how to develop a simple login using PHP and MySQL
2009-09-05 18:26:47

Event driven programming in PHP


An article looking at adding some kind of event driven model to PHP 5
2008-07-28 12:48:09

How to create your own RSS Reader


It is very simple creating your own rss reader, the following article looks at a few methods of doing this.
2008-06-23 13:18:25

Javascript Reference: Dropdown


A quick reference about working with dropdown boxes (select element) in javascript.
2007-02-17 16:36:41

Top 5 Articles

Programming humor


Collection of funny programming articles
2006-10-08 14:23:43

How to create your own RSS Reader


It is very simple creating your own rss reader, the following article looks at a few methods of doing this.
2008-06-23 13:18:25

PHP: Snippets


Collection of PHP snippets
2010-05-22 00:06:45

Javascript Reference: Dropdown


A quick reference about working with dropdown boxes (select element) in javascript.
2007-02-17 16:36:41

Event driven programming in PHP


An article looking at adding some kind of event driven model to PHP 5
2008-07-28 12:48:09