Solved

Multi select drop-down list

Posted on 2006-10-19
10
555 Views
Last Modified: 2008-01-09
I need to build a multi-select drop-down list on a web page.  I need to be able to use Javascript or VBScript to accomplish this.  I've scoured the web and can't find much help at all.  Can anyone point me to an example?  I know enough about Javascript/VBScript to be dangerous and am not an expert by any stretch to give you an idea where I'm coming from.
0
Comment
Question by:mbbuechler
  • 3
  • 2
  • 2
  • +2
10 Comments
 
LVL 6

Expert Comment

by:iscode
ID: 17769916
0
 
LVL 5

Expert Comment

by:wranlon
ID: 17770071
You mean like:

<select size = "5" multiple = "true">
<option>Select me</option>
<option>and me</option>
<option>and me too</option>
<option>me also</option>
<option>but not me</option>
<option>or me</option>
<option>except me</option>
</select>
0
 
LVL 2

Expert Comment

by:kindaAbstruse
ID: 17770093
Can't you just make a multi select drop down through HTML

<select size="4" multiple="true">
<option>...</option>
</select>

with multiple="true" then you can select more than one
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 6

Expert Comment

by:iscode
ID: 17770100
Update Recordset using a MultiSelect Listbox
http://www.developerfusion.co.uk/show/4653/
0
 

Author Comment

by:mbbuechler
ID: 17770141
OK, the <SELECT SIZE="4" multipe="true"><option>...</option></SELECT> looks great - is there a way to incorporate all the functionality of this type of list into a smaller one-line control with a drop down?  If there isn't that I can tackle it this way.
0
 
LVL 3

Expert Comment

by:mostwired
ID: 17771119
Multi-select drop-down would look weird with all the multiple selections displayed on one line... You can do that with some javascript. Draw a textbox HTML control and an HTML image IMG tag (with down-arrow image). Underneath, draw a hidden DIV tag with a multi-select list, as in examples above. Then in Onclick event of the IMG control, unhide the DIV tag as:

document.getElementById("divtagid").style.visibility="visible";
Maybe you can add OK button at the bottom of the DIV tag, with Onclick event getting all selected values from the SELECT control, concatenating them together via coma-separation, and populating the top Textbox; then hiding the DIV tag.
Put all of that in another DIV tag so it resizes nicely, and test with Firefox and IE to make sure everything works.
0
 

Author Comment

by:mbbuechler
ID: 17772857
mostwired - I love your idea - can you give me some sample HTML that will do exact this?
0
 
LVL 5

Expert Comment

by:wranlon
ID: 17775052
Here is one example of doing this with DHTML: http://www.imnmotion.com/reference/2005/10/24/wideselect.html

I just realized this doesn't show any API docs or legible source to it, so will add that if you're interested.  The "paged" option shows how a drop-down could be created (the multiple select option isn't turned on for the paged option, though could be).
0
 
LVL 3

Accepted Solution

by:
mostwired earned 500 total points
ID: 17777788
Okay - here's the code. Format it as needed, and you can beautify with some images, etc. (Save as HTML file)
And seriously - Javascript is a powerful thing - so if you get a lot into web design, spend time to study it well.
=====================================================

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>MultiSelect Dropdown Page</title>
   
    <script language="javascript">
   
    function showDropDown()
    {
        document.getElementById("ddlDiv").style.visibility = "visible";
    }
   
    function acceptDropDown()
    {
        document.getElementById("ddlDiv").style.visibility = "hidden";
        // Get values into textbox
        var myList = document.getElementById("selMulti");
        var myListCount = myList.options.length; // number of items
        var textToDisplay = "";
        for (i=0; i < myListCount; i++) if (myList.options[i].selected == true) textToDisplay += myList.options[i].value + ";";
        document.getElementById("txtDropDown").value = textToDisplay;
    }
   
    </script>
</head>
<body>

<nobr><input id="txtDropDown" type="text" style="width: 147px" readonly /> <input id="cmdDropDown" type="button" onclick="showDropDown()" value=" v " /></nobr>
<div id="ddlDiv" style="visibility:hidden">
<select id="selMulti" multiple style="width: 153px">
        <option value="1">Item 1</option>
        <option value="2">Item 2</option>
        <option value="3">Item 3</option>
        <option value="4">Item 4</option>
        <option value="5">Item 5</option>
    </select>
    <input id="cmdOK" onclick="acceptDropDown()" type="button" value="ok" /></div>
 
</body>

</html>




=====================================================
0
 

Author Comment

by:mbbuechler
ID: 17778477
Thanks for the awesome info, I appreciate it!
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how to build a intranet site 8 42
Using jQuery to set a DIV attribute on page load 9 41
Fulfillment API php code sample 1 56
Two wordpress questions 3 61
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

809 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