How to add Item in SELECT listbox???

[hash4sp]

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>
......
...
..
</Select>
[/HTML]
In the above code i need to add the text "Select..."
as first item.

Thanks in advance!
Hash

[acoder]

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.

[hash4sp]

I did used add() method. But it adds the item as the
last option. How to make it on the top of list?

[gits]

hi ...

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

kind regards

[hash4sp]

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:

[CODE=javascript]function AddItem(id){
var oOption = document.create Element("OPTION ");
langext = parent.Language Extention;
if (langext=="A")
{
txt = "...%u0627%u062 E%u062A%u064A%u 0627%u0631"//"...اختيار" ;
}
else
{
txt = "Select..." ;
}
oOption.text=un escape(txt);
oOption.value=" ";
id.add(oOption, 0); // where id is the object
id.options[0].selected=true;
}
[/CODE]

Once again thanx a lot to u guys...

cheers!
Hash

[acoder]

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.

[Dasty]

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.create Element('option ');
newOption.value = my_value;
newOption.appen dChild(document .createTextNode ('my_text'));

// if you want to insert in the end
obj.appendChild (newOption);

// if you want to insert not in the end (on index position)
obj.insertBefor e(newOption, obj.options[index]);
[/PHP]
(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