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

[Danny]

Re: remove select option on Pocket IE



He he, nevermind IE pocket, that code is completely invalid, shouldn't work
for any IE at all. document.YOURFO RMNAME.YOURSELE CTNAME.options[0]=null
removes 1st option and so on and so on.


Danny

[RobG]

Re: remove select option on Pocket IE

Danny wrote:[color=blue]
>
> He he, nevermind IE pocket, that code is completely invalid, shouldn't work
> for any IE at all.[/color]

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.
[color=blue]
> for any IE at all. document.YOURFO RMNAME.YOURSELE CTNAME.options[0]=null
> removes 1st option and so on and so on.[/color]



--
Rob

[RobG]

Re: remove select option on Pocket IE

Stefan Finzel wrote:[color=blue]
> 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);[/color]

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[i].parentNode.rem oveChild(opt[i]);
}

or

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

or some combination of the above?


[...]

--
Rob

[RobG]

Re: remove select option on Pocket IE

Stefan Finzel wrote:[color=blue]
> 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 {[/color]

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.

[color=blue]
> // this does not work on Pocket IE
> while (opt.length) {
> opt.remove(0);[/color]

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.le ngth){
sel.remove(0);
}

will remove all the options in DOM 1 compliant browsers, including all
those listed below - hence no need for browser sniffing.
[color=blue]
> }
> } else {
> # IE 5.+, Moz, FF, Galeon, Opera, Konq
> # remove everything at once
> opt.length = 0;
> }
>[/color]

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.eleme nts[0];
while (sel.options.le ngth){
sel.remove(0);
}
">
</form>


--
Rob

[Stefan Finzel]

Re: remove select option on Pocket IE

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

RobG wrote:
....[color=blue]
> 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.le ngth){
> sel.remove(0);
> }
>[/color]
....
[color=blue]
>
> 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.[/color]
....
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.create Element("OPTION ");

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

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

TIA

Stefan

[RobG]

Re: remove select option on Pocket IE

Stefan Finzel wrote:[color=blue]
> Argh!!! That's it! Thank you very much RobG.
>
> RobG wrote:
> ...
>[color=green]
>> 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.le ngth){
>> sel.remove(0);
>> }
>>[/color]
> ...
>[color=green]
>>
>> 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.[/color]
>
> ...
> 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[/color]

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.
[color=blue]
>
> (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) {[/color]

You really should get rid of browser sniffing, what works in Pocket IE
will probably work elsewhere too.
[color=blue]
> // while this completly works on IE5.+, it fails
> // in the next line on Pocket IE
> var el = document.create Element("OPTION ");[/color]

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.
[color=blue]
>
> opts.add(el,i);
> el.innerText = data[i];
> el.value = lnk.value + "_" + data[i];[/color]

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.selectedInd ex].value + "_" + data[i];
[color=blue]
> } else {
> opts.options[i] = new Option(data[i], lnk.value + "_" + data[i]);[/color]

opts.options[i] = new Option( data[i],
lnk[lnk.selectedInd ex].value
+ "_" + data[i]);
[color=blue]
> }
> }
>
> Any idea what's wrong with my usage of document.create Element("OPTION ")
> on Pocket IE?[/color]

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



--
Rob

[Stefan Finzel]

Re: remove select option on Pocket IE

RobG wrote:
....[color=blue]
> You really should get rid of browser sniffing, what works in Pocket IE
> will probably work elsewhere too.[/color]
....

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.

....[color=blue]
> 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.[/color]
....

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.create Element("OPTION ");
[color=blue][color=green]
>> opts.add(el,i);
>> el.innerText = data[i];
>> el.value = lnk.value + "_" + data[i];[/color]
>
> 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:
>[/color]
[color=blue]
> el.value = lnk[lnk.selectedInd ex].value + "_" + data[i];[/color]

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

Stefan

[RobG]

Re: remove select option on Pocket IE

Stefan Finzel wrote:[color=blue]
> RobG wrote:
> ...
>[color=green]
>> You really should get rid of browser sniffing, what works in Pocket IE
>> will probably work elsewhere too.[/color]
>
> ...
>
> 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.
>
> ...
>[color=green]
>> 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.[/color][/color]

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


[...]


--
Rob

[Stefan Finzel]

Re: remove select option on Pocket IE

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.selectedInd ex, it fails only here!?
var opt = new Option(data[i], lnk.value + "_" + data[i]);
// 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[i] = new Option(data[i], lnk[lnk.selectedInd ex].value\
+ "_" + data[i])
}

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

Thank you RobG

[RobG]

Re: remove select option on Pocket IE

Stefan Finzel wrote:[color=blue]
> 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.selectedInd ex, it fails only here!?
> var opt = new Option(data[i], lnk.value + "_" + data[i]);
> // 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[i] = new Option(data[i], lnk[lnk.selectedInd ex].value\
> + "_" + data[i])
> }[/color]

That amazing. So 'new Option' works, you just have to create the option
first, then add it to the select.
[color=blue]
>
> Large option collections are kept small now by dynamically removing and
> adding options in cascaded select.
>
> Thank you RobG[/color]

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

--
Rob

[Stefan Finzel]

Re: remove select option on Pocket IE

....[color=blue]
> 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).[/color]
....

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.