[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Form Dropdown and Options

Posted on 2003-11-20
10
Medium Priority
?
377 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 200 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

649 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