IE vs Mozilla Chained-select

[JoakimNorlinder]

Hello!
I have a strange problem that i don't understand.
I'm using a chained-select function that i have found here:

http://www.bobbyvandersluis.com/art...namicselect.php

I have modified it so when I first enter the page the function will set the element that been selected previously to selected. I've done that by adding this line:

sel2[pos].selected='selected';

where pos is the position in the selectbox. The problem is that it works perfectly in mozilla and Opera but not in IE. Whats really strange is that if I add an alert just above the sel2[pos].selected=true; it will work.

like this:

if (is_ie5up){
alert("Hello");
}
sel2[pos].selected='selected';

But it's not so nice to see this every time you enter the page

Would apreciate if anyone can help me.

/Jocke

 

[cLFlaVA]

you have given very limited information. that link doesn't work, where is your page? where is your code written in the page?



*cLFlaVA
----------------------------
[tt]( <P> <B>)[sup]13[/sup] * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[tsuji]

If adding alert() then working, the phenomenon mainly points to the timing issue. Add a slight adhoc delay.
[tt] setTimeout("sel2["+pos+"].selected='selected'",100);[/tt]
Here the sel2 must have some global scope, else expand it to the full path from document object down to the select element. For less adhoc time delay, you device a function to control the existence of sel2, if not add further delay. This is quite a bit of guessing. Try it?

 

[JoakimNorlinder]

Sorry, this is the right link:

http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php

Functioncall with Id from selectboxes:
dynamicSelect("sel1", "sel2");

The function works like this: The value from the first selectbox will be matched to the other selectbox's classvalue.
Example:

<select id="sel1" name="first">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>


<select id="sel2" name="second">
<option class="1">1-1</option>
<option class="2">2-1</option>
<option class="3">3-1</option>
<option class="1">1-2</option>
<option class="2">2-2</option>
<option class="3">3-2</option>
</select>



The Code:

function dynamicSelect(sel1, sel2) {
// Feature test to see if there is enough W3C DOM support
if (document.getElementById && document.getElementsByTagName) {

// Obtain references to both select boxes
var sel1 = document.getElementById(sel1);
var sel2 = document.getElementById(sel2);

// Clone the dynamic select box
var sel2clon = sel2.cloneNode(true);

// Obtain references to all cloned options
var clonedsel2 = sel2clon.getElementsByTagName("option");

// Onload init: call a generic function to display the related options in the dynamic select box

refreshDynamicSelectOptions(sel1, sel2, clonedsel2);

// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
sel1.onchange = function() {
refreshDynamicSelectOptions(sel1, sel2, clonedsel2);
}
}
}

function refreshDynamicSelectOptions(sel1, sel2, clonedSections) {
var vald;
//check wich is selected before emtying sel2
if(sel2.selectedIndex >= 0){
if(sel2[sel2.selectedIndex]){
vald = sel2[sel2.selectedIndex].value;
}
}

// Delete all options of the dynamic select box
while (sel2.options.length) {
sel2.remove(0);
}

// Create regular expression objects for the value of the selected option of the main select box as class names
var pattern = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
// Iterate through all cloned options

var pos = -1, n = 0;

for (var i = 0; i < clonedSections.length; i++) {
// If the classname of a cloned option equals the value of the selected option of the main select box
if (clonedSections.className.match(pattern)) {

if(clonedSections.value==vald){
pos=n;
}

// Clone the option from the hidden option pool and append it to the dynamic select box
sel2.appendChild(clonedSections.cloneNode(true));
n++;
}
}

if(pos>0 && (sel2.length>0) && sel2[pos]){
sel2[pos].selected =true;
}
}


The code works perfactly except for the sel2[pos].selected = true;

The strange thing is that it all works if i put an alert right above the sel2[pos].selected = true;

 

[cLFlaVA]

try...

[tt]sel2.options[pos].selected = true;[/tt]



*cLFlaVA
----------------------------
[tt]( <P> <B>)[sup]13[/sup] * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[JoakimNorlinder]

I've tried that to, with the same result.

/Joakim