Link to home
Start Free TrialLog in
Avatar of pinkstonm
pinkstonm

asked on

Form Dropdown and Options

I have an ASP that puts out a form that has a dropdown field that i want to allow for multiple selections.

Problem if you tell the field to be more than one line it makes it hard to fit on form.  If you make is one line it is hard for the user to manage multiple selections.

Is there a way to start the field as one line and then when clicked or moused over that it expands it to show all the values?
Avatar of pinkstonm
pinkstonm

ASKER

<SELECT NAME="lob_offering" onmouseover="fillHelp('Service Line(s) supported by the site')" onmouseout="fillHelp(' ')" style="font-family: Arial; font-size: 11px; color: #000080" multiple size="1">
<OPTION SELECTED><%=rs("lob_offering")%></option>
<OPTION>CRM</option>
<OPTION>DSS</option>
<option>ESS</option>
<option>APM</option>
<option>FPM</option>
<option>Govt</option>
<option>Other</option>
</SELECT>

this gives a multi selectable drop down which does not realy drop down.  If size is changed to 2 or 3 or higher you get more but prior to dropping it down.
In theory one could do something like:

<select ... multiple size="1" onclick="this.size=this.options.length;">

You could also use

<script type="text/javascript">

function doExpand(select)
{
  if(!window.expanded)
  {
    select.size = select.options.length;
    window.expanded = true;
  }
  else
  {
    select.size = 1;
    window.expanded = false;
  }
}

</script>

<select ... onclick="doExpand(this);">

to toggle the expansion. However, this interferes with the use of the select. So a better solution would be:

<script type="text/javascript">

function doExpand(select)
{
  if(!window.expanded)
  {
    select.size = select.options.length;
    select.form.expandButton.value = "Collapse List";
    window.expanded = true;
  }
  else
  {
    select.size = 1;
    select.form.expandButton.value = "Expand List";
    window.expanded = false;
  }
}

</script>


<input type="button" name="expandButton" value="Expand List" onclick="doExpand(this.form.lob_offering);"><br>

<select name="lob_offering" ... multiple size="1">
<option selected><%=rs("lob_offering")%></option>
<option>CRM</option>
<option>DSS</option>
<option>ESS</option>
<option>APM</option>
<option>FPM</option>
<option>Govt</option>
<option>Other</option>
</select >

However, this will still cause the rest of your page to be reflowed and might not be very aesthetical or user-friendly IMO. I think a simpler solution is simply to set size="8" (or what have you) to display all available options when the page loads, but perhaps with the correct layout it won't look too bad.
P.S. I tested the last version of the script above (using the extra button to expand/collapse the select) in MSIE 5.0/6.0, Mozilla 1.5 and Opera 7.21. It should work in all the version 4 or higher browsers except possibly Netscape 4 (I don't keep a copy of it any longer). Let me know how it goes, eh?
Avatar of seanpowell
>>I don't keep a copy of it any longer
I can send you mine if you like :-)
No thanks. I don't miss the free drive space a bit. :)

In all seriousness, I really don't understand why people use it or worry about it very much, considering that NS 6 was released -- what, 3 years ago? NS 3 (which was actually a more stable browser) got dropped like a hot potato as soon as v. 4 was out, and absolutely NOBODY worries about being compatible with it any more.
I really like the first and second options....

If I do it with a mouseover instead of click how would i reduce back once I mouse out?

Thanks
Sorry to interupt again pinkstonm...
We have a client that still uses it (300+ people) so we need to continue to support it. I can lose the client, or adapt the code...
ASKER CERTIFIED SOLUTION
Avatar of Zontar
Zontar

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
george, you're saying you actually have a client that still uses Netscape-THREE????
No, 4.7. (At that point I would lose the client...)