Solved

Multi select drop-down list

Posted on 2006-10-19
10
538 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
 
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

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
Form submit issue 11 54
Reason for High TTFB 1 34
Why can't my site show videos? 5 41
increase words that display in widget 6 20
Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
Read about why website design really matters in today's demanding market.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to count occurrences of each item in an array.

760 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

19 Experts available now in Live!

Get 1:1 Help Now