By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,341 Members | 1,681 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,341 IT Pros & Developers. It's quick & easy.

How to add Item in SELECT listbox???

P: 55
Hi !

Generating a dynamic HTML page which
gets a list of items in <SELECT> from db.
Onload of the html page i want to add text
"Select..." as the first item in the list.
How do i do it?

Code as follows:
[HTML]<select id='cities'>
<option value='1'>City1</option>
<option value='2'>City2</option>
<option value='3'>City3</option>
In the above code i need to add the text "Select..."
as first item.

Thanks in advance!
Nov 10 '07 #1
Share this Question
Share on Google+
6 Replies

Expert Mod 15k+
P: 16,027
Use the add() method. Note that IE uses a non-standard method and the standard method, would you believe it, causes an error in IE. You will need to use a try...catch to deal with IE's bug.
Nov 10 '07 #2

P: 55
I did used add() method. But it adds the item as the
last option. How to make it on the top of list?
Nov 10 '07 #3

Expert Mod 5K+
P: 5,390
hi ...

have a look at the insertBefore() dom-method here

kind regards
Nov 10 '07 #4

P: 55
hi acoder & gitts!

thanks for ur replies... earlier i didnt look carefully in the link given by
acoder... now it works fine...

my code as follows:

Expand|Select|Wrap|Line Numbers
  1. function AddItem(id){
  2.   var oOption = document.createElement("OPTION"); 
  3.   langext = parent.LanguageExtention;
  4.   if (langext=="A") 
  5.   {
  6.   txt = "...%u0627%u062E%u062A%u064A%u0627%u0631"//"...اختيار";
  7.   }
  8.   else 
  9.   {
  10.   txt = "Select...";
  11.   }
  12.   oOption.text=unescape(txt);
  13.   oOption.value=""; 
  14.   id.add(oOption,0); // where id is the object
  15.   id.options[0].selected=true;
  16. }
Once again thanx a lot to u guys...

Nov 10 '07 #5

Expert Mod 15k+
P: 16,027
No that wouldn't work in non-IE browsers.

Test in, for example, Firefox. The correct method is to have an option object as the second parameter, not the selected index (which is what IE requires).

See this example.
Nov 11 '07 #6

Expert 100+
P: 101
hi ...

have a look at the insertBefore() dom-method here

kind regards
^^ exactly

Never use functions / methods that are not browser (standards) compatible. That will just result into unnecessary page restrictions. All reasonable browsers supports dom so:

[PHP]var newOption = document.createElement('option');
newOption.value = my_value;
newOption.appendChild(document.createTextNode('my_ text'));

// if you want to insert in the end

// if you want to insert not in the end (on index position)
obj.insertBefore(newOption, obj.options[index]);
(where obj is selectbox element)
gonna work widely.

Well there is one exception (but it's just a bug) that it's very rare. But in Opera when your selectbox is inside the hidden div and you want to alter it while it's hidden, "sometimes" opera acts strange. I wont describe it now, but remember: if you will have strange behavior in opera:
1) just disconnect selectbox from DOM tree (keep it in local variable for example)
2) make changes you need
3) attach it back on the same place to DOM tree
Nov 11 '07 #7

Post your reply

Sign in to post your reply or Sign up for a free account.