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:

function AddItem(id){
  var oOption = document.createElement("OPTION"); 
  langext = parent.LanguageExtention;
  if (langext=="A") 
  {
  txt = "...%u0627%u062E%u062A%u064A%u0627%u0631"//"...اختيار";
  }
  else 
  {
  txt = "Select...";
  }
  oOption.text=unescape(txt);
  oOption.value=""; 
  id.add(oOption,0); // where id is the object
  id.options[0].selected=true;
}
 

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.createElement('option');
newOption.value = my_value;
newOption.appendChild(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.insertBefore(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