Solved

Multi select drop-down list

Posted on 2006-10-19
10
559 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
[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
  • 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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

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 …
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
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…

730 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