IE (naturally) select-option bug, workaround?

[Gregor Kofler]

Refactoring my old DualSelectBox [1], I thought it would be much smarter
to get rid of the new Option() stuff, and instead just switch childNodes
between the two select elements. Something like that:

function shiftSelectedOptions(src, dest) {
var i, len, opts = [];
for(i = 0, len = src.options.length; i < len; i++) {
if (src.options.selected) {
opts.push(src.options);
}
}
for(i = 0, len = opts.length; i < len; i++) {
opts.selected = false;
dest.appendChild(opts);
}
}

Works as expected in all reasonable browsers, alas IE6 (and perhaps 7,
too) has issues. The childNodes get removed from the source element, and
get appended to the destination element - at least that's what this
abysmal DOM Explorer tells me. But they stay invisible - as if some sort
of "refresh" is missing.

To add to the confusion: The above function gets called upon
initialization of the widget, and there it works (i.e. the options show
up), despite nothing explicit happens to the DOM after calling above
function. Just subsequent adding fails.

init() {
....
sourceBox = destinationBox.cloneNode(false);
destinationBox.parentNode.insertBefore(sourceBox, destinationBox);
shiftSelectedOptions(destinationBox, sourceBox);
window.alert("check!"); // options visible
}

BTW: The childNodes of the select elements get cleaned, i.e. all nodes
that are not of the "OPTION" type get removed, including plain textnodes.

Any idea, how to deal with this issue?

Gregor


[1]
http://web.gregorkofler.com/index.php?page=form_enhancements

 

[Doug Gunnoe]

Refactoring my old DualSelectBox [1], I thought it would be much smarter
to get rid of the new Option() stuff, and instead just switch childNodes
between the two select elements. Something like that:

function shiftSelectedOptions(src, dest) {
var i, len, opts = [];
for(i = 0, len = src.options.length; i < len; i++) {
if (src.options.selected) {
opts.push(src.options);
}
}
for(i = 0, len = opts.length; i < len; i++) {
opts.selected = false;
dest.appendChild(opts);
}

}

Works as expected in all reasonable browsers, alas IE6 (and perhaps 7,
too) has issues. The childNodes get removed from the source element, and
get appended to the destination element - at least that's what this
abysmal DOM Explorer tells me. But they stay invisible - as if some sort
of "refresh" is missing.

Hi Greg. I tried your script in IE7 and Firefox, and in both cases the
nodes were removed from the 'src' element. I was a little confused by
your question above. Is this what you need to happen, or not?

When I tried it, after the childNodes were appended to the 'dest'
element, they were visible in both IE7 and Firefox in the 'dest'
element. I don't have IE6 handy at the moment.

doing, opts.push(src.options.cloneNode(true)) keeps the drop down
option available in the original 'src' element. But, I'm not sure the
ramifications of using cloneNode on form elements and then later
submitting the form.

BTW: The childNodes of the select elements get cleaned, i.e. all nodes
that are not of the "OPTION" type get removed, including plain textnodes.

And I don't understand why it would do that, unless the other nodes
were also children of the option nodes.

 

[Gregor Kofler]

Doug Gunnoe meinte:

Hi Greg. I tried your script in IE7 and Firefox, and in both cases the
nodes were removed from the 'src' element. I was a little confused by
your question above. Is this what you need to happen, or not?

Yes. They should be moved from one select element to the other.

When I tried it, after the childNodes were appended to the 'dest'
element, they were visible in both IE7 and Firefox in the 'dest'
element. I don't have IE6 handy at the moment.

WWW sources state, that the select elements were completely "redesigned"
in IE7.

doing, opts.push(src.options.cloneNode(true)) keeps the drop down
option available in the original 'src' element. But, I'm not sure the
ramifications of using cloneNode on form elements and then later
submitting the form.

Not sure about that, too. However, since a submit listener has to
prepare the data anyway, one could always stuff the data in some hidden
input (currently the submit handler sets selected on all options of the
destination box).

And I don't understand why it would do that, unless the other nodes
were also children of the option nodes.

IE6 also has comparable problems when textnodes are mixed with the
options. Plus: Iterating through childnodes is easier. In a first
attempt I removed all non-option elements.


Gregor

 

[korisu]

Works as expected in all reasonable browsers, alas IE6 (and perhaps 7,

too) has issues. The childNodes get removed from the source element, and
get appended to the destination element - at least that's what this
abysmal DOM Explorer tells me. But they stay invisible - as if some sort
of "refresh" is missing.

I haven't checked your example here, but I revamped a similar option-
swapping widget at work several months ago, and ran into similar
behavior (albeit with insertBefore instead of appendChild), and here's
what I found.

The option is actually there, but IE needs a trigger to repaint the
element before it'll show up. I found that it reappeared onmouseover
when I was debugging it. In the end, the following worked when I used
it after any DOM-altering code:

function repaintIE (obj) {
if (obj && obj.style) {
obj.style.visibility = "hidden";
obj.style.visibility = "";
}
}

Hope that helps!

 

[Gregor Kofler]

korisu meinte:

The option is actually there, but IE needs a trigger to repaint the
element before it'll show up.

Exactly. That's what I figured out, too.

I found that it reappeared onmouseover
when I was debugging it. In the end, the following worked when I used
it after any DOM-altering code:

function repaintIE (obj) {
if (obj && obj.style) {
obj.style.visibility = "hidden";
obj.style.visibility = "";
}
}

I tried something like replacing the select-element with itself. Didn't
work. I'll look into your suggestions, thanks.

Gregor

 

[benlevy3]

I found this posting while I was working on an issue.

The cloneNode (true) works great in IE7, but in IE6 it does not show
(as the original post states). The repaint suggestion works GREAT!

Thanks all.