PDA

View Full Version : Select lists - remember values after submit not working in IE7



jgifford
08-13-2008, 01:28 PM
I have two dynamic select lists that are populated using .csv files.

On submit, a set of results is returned based on the two options that were chosen.

In IE7 when the results are returned the select lists default back to the last option in the select list. I would like it to default to what ever option was just chosen.

I'm using the following code and it works as I would like it to in both Firefox and Safari, but just defaults to the last option in the list for IE7.


<script language="JavaScript" type="text/javascript">
// Used to be sure the last item selected stays selected.
if (document.getElementById("litType_" + actualLitType) != null)
{
document.getElementById("litType_" + actualLitType).selected=true;
}
</script>

The variable "actualLitType" is pulled from the URL and should be part of the id of the selected option.

Any ideas why it doesn't work like I would like it to in IE7?

Thanks in advance,
Jesse

jscheuer1
08-13-2008, 03:21 PM
For IE you may need to save and restore the select element's options' selectedIndex. The bad news is that if you are unfamiliar with what that means, it's a little complicated. The good news is that other browsers can do it this way too, so you won't need two sets of code.

Let's say that actualLitType is the value of the selected option and litType is the id of the select element:


<select id="litType" name="actualLitType">
<option value="english">English</option>
<option value="french">French</option>
<option value="spanish">Spanish</option>
</select>

Then you could do:


var o = document.getElementById('litType').options;
for (var i = o.length - 1; i > -1; --i)
if(o[i].value == actualLitType)
o.selectedIndex = i;

jgifford
08-13-2008, 07:51 PM
That did it!

Thanks John.

jgifford
08-19-2008, 01:51 PM
I have another related issue.

This time I have a select list dynamically populated by a SQL Server database.

I want to select all items in the list when a particular item is chosen. The code I've written works great in Firefox and I'm assuming other browsers as well. It just doesn't work in IE and specifically tested not working in IE7.

Here is the code I'm using:

Select List:


<select name="Literature_MarketID" class="requiredfield" size="13" id="marketList" multiple>
<option selected="selected" value="">=== Control-click to select multiple items ===</option>
<%
While (NOT rsMarkets.EOF)
%>
<option value="<%=(rsMarkets.Fields.Item("Markets_ID").Value)%>" id="marketOption_<%=(rsMarkets.Fields.Item("Markets_ID").Value)%>" onClick="checkAll();"><%=(rsMarkets.Fields.Item("Markets_Description").Value)%></option>
<%
rsMarkets.MoveNext()
Wend
If (rsMarkets.CursorType > 0) Then
rsMarkets.MoveFirst
Else
rsMarkets.Requery
End If
%>
</select>

Javascript used to select all options when "All" is chosen from the list

<script language="JavaScript" type="text/JavaScript">
<!--
function checkAll()
{
var allMarkets = document.getElementById("marketOption_13");

if (allMarkets.selected == true)
{
if (document.getElementById('marketList') != null)
{
var o = document.getElementById('marketList');
for (var i = o.length - 1; i > 0; --i)
{
o.options[i].selected = true;
}
}
}
}
//-->
</script>

I can't use the fix suggested for my last issue because this time I want all options selected and selectedIndex only applies to one option.

Any ideas on what I can do to make this work in IE7?

codeexploiter
08-20-2008, 09:36 AM
Check the following code, which makes multiple selection in a select list in both FF and IE:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">

</style>
<script type="text/javascript">
function multipleSelection(){
var s = document.forms['form1'].elements['sel1'];
s.multiple = true;
for(var i = 0; i < s.options.length; i++){
s.options[i].selected = true;
}
}
</script>
</head>
<body>
<div>
<form name="form1">
<select name="sel1">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<input type="button" name="b1" value="click to multiple selection"/>
</form>
</div>
<script type="text/javascript">
document.forms['form1'].elements['b1'].onclick = multipleSelection;
</script>
</body>
</html>



Hope this helps.

jgifford
08-20-2008, 03:32 PM
codeexploiter:

That is a pretty cool trick. I changed my code so it looked more like yours, but it still doesn't appear to be working in IE.

Any ideas what part of my code IE doesn't like?

Some differences between my code and yours where the IE issue may exist:

1. Yours starts as a regular select list and is changed to a multiple. Mine needs to start as a multiple and stay a multiple.
2. Yours selects all when the button is clicked. Mine needs to select all only when a specific option is clicked.

Here is my updated code:
Javascript used to select all options when "All" is chosen from the list


<script language="JavaScript" type="text/JavaScript">
<!--
function checkAll()
{
var allMarkets = document.getElementById("marketOption_13");

if (allMarkets.selected == true)
{

var o = document.forms['addLiterature'].elements['Literature_MarketID'];
o.multiple = true;

for(var i = 0; i < o.options.length; i++)
{
o.options[i].selected = true;
}
}
}
//-->
</script>


Select List:


<select name="Literature_MarketID" class="requiredfield" size="13" id="marketList" multiple>
<option selected="selected" value="">=== Control-click to select multiple items ===</option>
<%
While (NOT rsMarkets.EOF)
%>
<option value="<%=(rsMarkets.Fields.Item("Markets_ID").Value)%>" id="marketOption_<%=(rsMarkets.Fields.Item("Markets_ID").Value)%>" onClick="checkAll();"><%=(rsMarkets.Fields.Item("Markets_Description").Value)%></option>
<%
rsMarkets.MoveNext()
Wend
If (rsMarkets.CursorType > 0) Then
rsMarkets.MoveFirst
Else
rsMarkets.Requery
End If
%>
</select>


Thanks for all the help,
Jesse

jgifford
08-22-2008, 06:41 PM
I was given a solution in another forum and it did the trick. Thanks everyone for your help. Here is where the solution is:

http://www.tek-tips.com/viewthread.cfm?qid=1495671&page=1