remove select option on Pocket IE

[Stefan Finzel]

Hi

trying to remove one or all elements of select options fails for Pocket
Internet Explorer. Is there a way to do this?

if is_PIE {
// this does not work on Pocket IE
while (opt.length) {
opt.remove(0);
}
} else {
# IE 5.+, Moz, FF, Galeon, Opera, Konq
# remove everything at once
opt.length = 0;
}


TIA

Stefan

 

[RobG]

He he, nevermind IE pocket, that code is completely invalid, shouldn't work
for any IE at all.

Posting non-sensical replies to nothing at all can only be interpretted
as an attempt to confuse.

Presumably you think the 'else' part of the posted code is in error, but
you are wrong.

document.forms[formname].elements[selectname].options.length = 0;

removes all of a select's options in one go - just as the OP indicated.

for any IE at all. document.YOURFORMNAME.YOURSELECTNAME.options[0]=null
removes 1st option and so on and so on.

 

[RobG]

Hi

trying to remove one or all elements of select options fails for Pocket
Internet Explorer. Is there a way to do this?

if is_PIE {
// this does not work on Pocket IE
while (opt.length) {
opt.remove(0);

I don't have pocket IE to play with, but that syntax works fine in IE
and Firefox. Have you tried looping through the options collection and
setting each option to 'null?

var i = opt.length;
while ( i-- ){
opt[1] = null;
}

or

while ( opt[0] ){
opt[0] = null;
}


or using the removeChild method?

var i = opt.length;
while ( i-- ){
opt.parentNode.removeChild(opt);
}

or

var sel = opt[0].parentNode;
while ( sel.firstChild ){
sel.removeChild(sel.childNodes[0]);
}

or some combination of the above?


[...]

 

[RobG]

Hi

trying to remove one or all elements of select options fails for Pocket
Internet Explorer. Is there a way to do this?

if is_PIE {

I'll see if I can get it right this time! You shouldn't be browser
sniffing, so 'is_PIE' should not be required at all.

// this does not work on Pocket IE
while (opt.length) {
opt.remove(0);

I guess from your code that 'opt' is the options collection, but the
remove method belongs to the select element, so it can't be expected
to work. If you get the select element, then:

while (sel.options.length){
sel.remove(0);
}

will remove all the options in DOM 1 compliant browsers, including all
those listed below - hence no need for browser sniffing.

}
} else {
# IE 5.+, Moz, FF, Galeon, Opera, Konq
# remove everything at once
opt.length = 0;
}

Yes, that is convenient and possibly quicker, but unless you have 100
or so options it will be undetectably so. And having a select with
100 options on a PDA does not sound like a good idea in the first place.

Here's a small test case:

<form action="">
<select>
<option>opt 1
<option>opt 2
<option>opt 3
</select>
<input type="button" value="remove options" onclick="
var sel = this.form.elements[0];
while (sel.options.length){
sel.remove(0);
}
">
</form>

 

[Stefan Finzel]

Argh!!! That's it! Thank you very much RobG.

RobG wrote:
....

I guess from your code that 'opt' is the options collection, but the
remove method belongs to the select element, so it can't be expected to
work. If you get the select element, then:


while (sel.options.length){
sel.remove(0);
}
....


Yes, that is convenient and possibly quicker, but unless you have 100 or
so options it will be undetectably so. And having a select with 100
options on a PDA does not sound like a good idea in the first place.

....
And that's really the initial problem, avoiding users to get large
selects while porting an javascript free application to small screen
devices.
To shorten selects i try using hierarchical selects and data in arrays
by removing and adding options.

Now removing works. But adding is still a problem too. Please see

(opts is the select element, data is a array, lnk is
another select element)

for (var i = 0; i < data.length; i++) {
if (is_PIE) {
// while this completly works on IE5.+,
it fails // in the next line on Pocket IE
var el = document.createElement("OPTION");

opts.add(el,i);
el.innerText = data;
el.value = lnk.value + "_" + data;
} else {
opts.options = new Option(data, lnk.value
+ "_" + data);
}
}

Any idea what's wrong with my usage of document.createElement("OPTION")
on Pocket IE?

TIA

Stefan

 

[RobG]

Argh!!! That's it! Thank you very much RobG.

RobG wrote:
...


...
And that's really the initial problem, avoiding users to get large
selects while porting an javascript free application to small screen
devices.
To shorten selects i try using hierarchical selects and data in arrays
by removing and adding options.

Now removing works. But adding is still a problem too. Please see

For the sake of readability, I've re-posted your code below. Please
indent using two or four spaces and manually wrap code at about 70
characters.

(opts is the select element, data is a array, lnk is
another select element)

for (var i = 0; i < data.length; i++) {
if (is_PIE) {

You really should get rid of browser sniffing, what works in Pocket IE
will probably work elsewhere too.

// while this completly works on IE5.+, it fails
// in the next line on Pocket IE
var el = document.createElement("OPTION");

I think IE in general has problems with options, why don't you just use
the code below what uses new Option? There doesn't seem to be anything
wrong with the code to this point.

opts.add(el,i);
el.innerText = data;
el.value = lnk.value + "_" + data;

That appears to be straight from the MS documentation, the use of
innerText will trouble many browsers.

You said that 'lnk' is another select. In some browsers, lnk.value will
work, but a more robust solution is:

el.value = lnk[lnk.selectedIndex].value + "_" + data;

} else {
opts.options = new Option(data, lnk.value + "_" + data);

opts.options = new Option( data,
lnk[lnk.selectedIndex].value
+ "_" + data);

}
}

Any idea what's wrong with my usage of document.createElement("OPTION")
on Pocket IE?

No. Try using just the new Option bit - it works in just about all
browsers and gets rid of the IE-centric innerText bit.

Hope that helps...

 

[Stefan Finzel]

RobG wrote:
....

You really should get rid of browser sniffing, what works in Pocket IE
will probably work elsewhere too.

....

Yes, you are absolutly right! I don't like it either. But first I try to
get a working application and then can get rid of each of such browser
sniffing. Don't like to change the code for other browsers to avoid
getting lost before it's done.

....

I think IE in general has problems with options, why don't you just use
the code below what uses new Option? There doesn't seem to be anything
wrong with the code to this point.

....

Well, using new Option didn't work at all for Pocket IE. That's the
reason I am trying to find any workaround. Both code snippets work on IE
5.+.

Debuging with alert boxes I found the Pocket IE stops working at

var el = document.createElement("OPTION");

opts.add(el,i);
el.innerText = data;
el.value = lnk.value + "_" + data;

That appears to be straight from the MS documentation, the use of
innerText will trouble many browsers.

You said that 'lnk' is another select. In some browsers, lnk.value will
work, but a more robust solution is:

el.value = lnk[lnk.selectedIndex].value + "_" + data;

That's a nice hint. I'll take it. Thank you RobG.

Stefan

 

[RobG]

RobG wrote:
...


...

Yes, you are absolutly right! I don't like it either. But first I try to
get a working application and then can get rid of each of such browser
sniffing. Don't like to change the code for other browsers to avoid
getting lost before it's done.

...

You have one possibility left: clone an existing option element, modify
its attributes and add that. Something like:


var newOpt = sel.options[0].cloneNode(true);
newOpt.value = 'someValue';
newOpt.text = 'someText';
sel.appendChild(newOpt);

Again, this works in everything I tried, but I can't test Pocket IE.
Here's hoping.


I've played a bit with innerHTML but it doesn't seem to work at all for
this, so it isn't an option (it would have been a pretty bad option anyway).


[...]

 

[Stefan Finzel]

Well after playing around with your and several other ideas, I found a
working solution (tested on Windows Mobile 2003 SE Internet Explorer).

if (is_PIE) {
// Pocket IE: do not use xxx.selectedIndex, it fails only here!?
var opt = new Option(data, lnk.value + "_" + data);
// Pocket IE: do not use xxx.options[...]=...
opts.add(opt,i);
} else {
// all other: IE 5.+/6.+, Moz, NS, FF, Galeon, Opera, Konq
opts.options = new Option(data, lnk[lnk.selectedIndex].value\
+ "_" + data)
}

Large option collections are kept small now by dynamically removing and
adding options in cascaded select.

Thank you RobG

 

[RobG]

Well after playing around with your and several other ideas, I found a
working solution (tested on Windows Mobile 2003 SE Internet Explorer).

if (is_PIE) {
// Pocket IE: do not use xxx.selectedIndex, it fails only here!?
var opt = new Option(data, lnk.value + "_" + data);
// Pocket IE: do not use xxx.options[...]=...
opts.add(opt,i);
} else {
// all other: IE 5.+/6.+, Moz, NS, FF, Galeon, Opera, Konq
opts.options = new Option(data, lnk[lnk.selectedIndex].value\
+ "_" + data)
}

That amazing. So 'new Option' works, you just have to create the option
first, then add it to the select.

Large option collections are kept small now by dynamically removing and
adding options in cascaded select.

Thank you RobG

Hey, that's great.

I'd expect that the 'is_PIE' method will work in all other browsers too,
it's in DOM 1, so it *should* be ubiquitous (of course, that doesn't
mean that it is).

 

[Stefan Finzel]

....

I'd expect that the 'is_PIE' method will work in all other browsers too,
it's in DOM 1, so it *should* be ubiquitous (of course, that doesn't
mean that it is).

....

Well, hope so, too. There are a few other things I want to modify to
work on Pocket IE first, like a calendar, a mac/ip address input and
maybe a sortable table. After that I'll go to test all of this with
different browsers again and kick off all unnecessary browser sniffing
once again. Currently only four special cases are left, all for Pocket IE.

I'll "(tell my experience|cry for help)" here again.