Solved

Form Dropdown and Options

Posted on 2003-11-20
10
360 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
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
 

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Why a span is lower 2 26
Html Table looping 4 26
.htaccess css/images no longer loading 4 40
really easy css change help please 4 19
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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…

830 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