Multi select drop-down list

mbbuechler used Ask the Experts™
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.
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

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>
Can't you just make a multi select drop down through HTML

<select size="4" multiple="true">

with multiple="true" then you can select more than one
Expert Spotlight: Joe Anderson (DatabaseMX)

We’ve posted a new Expert Spotlight!  Joe Anderson (DatabaseMX) has been on Experts Exchange since 2006. Learn more about this database architect, guitar aficionado, and Microsoft MVP.

Update Recordset using a MultiSelect Listbox


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.
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:

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.


mostwired - I love your idea - can you give me some sample HTML that will do exact this?

Here is one example of doing this with DHTML:

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).
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="" >
    <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;

<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>
    <input id="cmdOK" onclick="acceptDropDown()" type="button" value="ok" /></div>




Thanks for the awesome info, I appreciate it!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial