Setting the selectedIndex of <select> in FireFox

[mpopnoe]

I have 5 dependent drop-downs (<select> objects) that after I submit the form to complete the search I want to display the drop-down lists to their previous selections. This works flawlessly in IE but fails to fire in FireFox. To keep the code simple to view since there is lots of it, I'll show you the javascript code that fires on page load. I'm using PHP to build javascript that should be rebuilding the drop-down values and selecting the previous selected value, and when I view source in FireFox after the submission I see all the javascript just like in IE - except it is not repopulating the javascript.

HERE IS THE CODE:
function BodyLoad() {

<?
if (isset($HTTP_POST_VARS["form_sent"])) {
$query = 'SELECT * FROM state';
$Result = mysql_query($query) or die('Query failed: ' . mysql_error());

$ctr = 1;
While( $Row = mysql_fetch_array($Result) ) {
echo "var oState = document.getElementById('myState');\n";
echo "oState.options[$ctr] = new Option('$Row[1]');\n";
echo "oState.options[$ctr].value = '$Row[0]';\n";
//echo "document.frmSearch.select_state.options[$ctr] = new Option('$Row[1]');\n";
//echo "document.frmSearch.select_state.options[$ctr].value = '$Row[0]';\n";

if ($HTTP_POST_VARS["select_state"] == $Row[0]) {
echo "oState.selectedIndex = $ctr;\n";
//echo "document.frmSearch.select_state.selectedIndex = '$ctr';\n";
$StateID = $HTTP_POST_VARS["select_state"];
}
$ctr++;
}
}

END CODE

Note: there are no javascript or PHP errors - so if you see one it is only because I pulled a sub-set of code out ... this is the part not working in FireFox. Also, having the selectedIndex value as a string and as an int doesn't seem to matter. In addition - both methods for setting the selectedIndex (one is commented out) works in IE - neither work in FireFox. I think I tried the DOM1 method and DOM2, but not certain.

Any help is greatly appreciated. Thanks!
Mike

 

[cLFlaVA]

instead of pasting the php here, it would be much more useful and effective if you could post the relevant javascript after it has been posted to the client. In other words, do a view > source copy/paste.

It'll be easier. Thanks.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]

 

[mpopnoe]

You got it:

function BodyLoad() {
var oState = document.getElementById('myState');
oState.options[1] = new Option('Oregon');
oState.options[1].value = '1';
oState.selectedIndex = 1;
var oState = document.getElementById('myState');
oState.options[2] = new Option('Washington');
oState.options[2].value = '2';
document.frmSearch.select_college.options[1] = new Option('Portland State University');
document.frmSearch.select_college.options[1].value = '1';
document.frmSearch.select_college.selectedIndex = '1';
document.frmSearch.select_college.options[2] = new Option('University of Portland');
document.frmSearch.select_college.options[2].value = '2';
document.frmSearch.select_school.options[1] = new Option('Business');
document.frmSearch.select_school.options[1].value = '1';
document.frmSearch.select_school.selectedIndex = '1';
document.frmSearch.select_school.options[2] = new Option('Economics');
document.frmSearch.select_school.options[2].value = '2';
document.frmSearch.select_school.options[3] = new Option('Political Science');
document.frmSearch.select_school.options[3].value = '3';
document.frmSearch.select_course.options[1] = new Option('Financial Accounting');
document.frmSearch.select_course.options[1].value = '1';
document.frmSearch.select_course.selectedIndex = '1';
}

 

[cLFlaVA]

ok, the reason it's most likely not working is because of the single-quotes around the value you're trying to set the selected index to. Remove the quotes, and you should be fine.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]

 

[mpopnoe]

Thanks but I mentioned in my orig. post that I tried both ways and it still is not working. I tried it again, here are results:

function BodyLoad() {
var oState = document.getElementById('myState');
oState.options[1] = new Option('Oregon');
oState.options[1].value = 1;
oState.selectedIndex = 1;
var oState = document.getElementById('myState');
oState.options[2] = new Option('Washington');
oState.options[2].value = 2;
document.frmSearch.select_college.options[1] = new Option('Portland State University');
document.frmSearch.select_college.options[1].value = 1;
document.frmSearch.select_college.selectedIndex = 1;
document.frmSearch.select_college.options[2] = new Option('University of Portland');
document.frmSearch.select_college.options[2].value = 2;
document.frmSearch.select_school.options[1] = new Option('Business');
document.frmSearch.select_school.options[1].value = 1;
document.frmSearch.select_school.selectedIndex = 1;
document.frmSearch.select_school.options[2] = new Option('Economics');
document.frmSearch.select_school.options[2].value = 2;
document.frmSearch.select_school.options[3] = new Option('Political Science');
document.frmSearch.select_school.options[3].value = 3;
document.frmSearch.select_course.options[1] = new Option('Financial Accounting');
document.frmSearch.select_course.options[1].value = 1;
document.frmSearch.select_course.selectedIndex = 1;
}

 

[cLFlaVA]

ok, what does FF's Javascript debugger say? Are any errors reported?

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]

 

[mpopnoe]

There are none coming up - that is why I'm having so much trouble figuring this out. I've found plenty of codce examples online showing the use of selectedIndex in FireFox - and they are accessing it in the same manner I am. Thanks alot for your input though - if you have any other ideas for achieveing the same thing please let me know. I'm so engrossed in doing it this way that I'm not able to look for an altenative - especially since it works so well in IE.

 

[cLFlaVA]

if you feel like posting the entire contents of the view > source, i might be able to get a better idea of the problem...

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]