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?
pinkstonmAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

pinkstonmAuthor Commented:
<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.
0
ZontarCommented:
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.
0
ZontarCommented:
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?
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

seanpowellCommented:
>>I don't keep a copy of it any longer
I can send you mine if you like :-)
0
ZontarCommented:
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.
0
pinkstonmAuthor Commented:
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
0
seanpowellCommented:
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...
0
ZontarCommented:
The problem with using a click on the select itself to trigger the expansion/contraction is that the same event also gets fired when the user selects one of the options. There is no way in MSIE or Opera to distinguish between click made on the select as a whole and clicks made on one of the options. I fear you will also encounter problems with using a mouseover for this prupose -- people like to have control. They don't like things jumping around at them. Nonetheless... here you go...

<select name="lob_offering" ... multiple size="1" onmouseover="this.size=this.options.length;" onmouseout="this.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>

That's all there is to it, no extra script functions necessary.

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ZontarCommented:
george, you're saying you actually have a client that still uses Netscape-THREE????
0
seanpowellCommented:
No, 4.7. (At that point I would lose the client...)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.