Solved

Form Dropdown and Options

Posted on 2003-11-20
10
331 Views
Last Modified: 2010-04-09
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?
0
Comment
Question by:pinkstonm
  • 5
  • 3
  • 2
10 Comments
 

Author Comment

by:pinkstonm
ID: 9790083
<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
 
LVL 11

Expert Comment

by:Zontar
ID: 9790863
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
 
LVL 11

Expert Comment

by:Zontar
ID: 9790943
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9791188
>>I don't keep a copy of it any longer
I can send you mine if you like :-)
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9791971
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:pinkstonm
ID: 9792009
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9792133
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
 
LVL 11

Accepted Solution

by:
Zontar earned 50 total points
ID: 9792175
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
 
LVL 11

Expert Comment

by:Zontar
ID: 9792187
george, you're saying you actually have a client that still uses Netscape-THREE????
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9792243
No, 4.7. (At that point I would lose the client...)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
lastpass auto fill login form 5 24
CSS grid style change 2 14
SVG Logo 4 18
Jump to a specific point on a responsive page 5 13
Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now