Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 582
  • Last Modified:

Multi select drop-down list

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
mbbuechler
Asked:
mbbuechler
  • 3
  • 2
  • 2
  • +2
1 Solution
 
wranlonCommented:
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
 
kindaAbstruseCommented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
iscodeCommented:
Update Recordset using a MultiSelect Listbox
http://www.developerfusion.co.uk/show/4653/
0
 
mbbuechlerAuthor Commented:
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
 
mostwiredCommented:
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
 
mbbuechlerAuthor Commented:
mostwired - I love your idea - can you give me some sample HTML that will do exact this?
0
 
wranlonCommented:
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
 
mostwiredCommented:
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
 
mbbuechlerAuthor Commented:
Thanks for the awesome info, I appreciate it!
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 3
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now