www.webdeveloper.com
Results 1 to 9 of 9

Thread: Multi-select drop down javascript

  1. #1
    Join Date
    Feb 2006
    Posts
    5

    Multi-select drop down javascript

    Hi,

    Can someone help me in getting Multi-select drop down javascript.
    I got few javascript which can do this, but my problem is that I don't want to use "multiple" attribute bcoz it turns my select drop down into list box which I don't want. So can someone help on this...

    Thanks & Regards

    Fahim

    ============= Start Code =============
    <HTML>
    <HEAD>
    <TITLE>Select</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function changeValue()
    {
    for (i=0; i<document.form1.Sel1.length;i++)
    {
    if (document.form1.Sel1[i].selected)
    alert(document.form1.Sel1[i].value);
    }
    }
    //-->
    </SCRIPT>
    </HEAD>

    <BODY>
    <form name=form1>
    <select name=Sel1 multiple size=5 onChange="changeValue()">
    <option value=A>A</option>
    <option value=B>B</option>
    <option value=C>C</option>
    </select>
    </form>
    </BODY>
    </HTML>
    ============= End Code =============

  2. #2
    Join Date
    Dec 2004
    Posts
    8,637
    Via normal FORM elements, there is no way to have a drop down SELECT that allows multiple selections. The only way multiple selections may be made in a standard SELECT element is via the use of the multiple attribute -- which automatically changes a SELECT into a list instead of a dropdown. Sorry.

  3. #3
    Join Date
    Feb 2006
    Posts
    5
    So. there is no way I through which I can achiev Multi-select drop down ???

  4. #4
    Join Date
    Dec 2004
    Posts
    8,637
    Not with normal FORM elements. You would have to go with a DHTML effect to achieve your desired goal.

  5. #5
    Join Date
    Feb 2006
    Posts
    5
    So can u give me that code ??

  6. #6
    Join Date
    Dec 2004
    Posts
    8,637
    I don't have such code. I would have to write it. Such DHTML code is too time-consuming to write to do it for free. Sorry.

  7. #7
    Join Date
    Apr 2004
    Location
    Amargosa Valley, NV
    Posts
    65
    As a hint, you might activate a hidden <div> that becomes visible only when you click the menu.

  8. #8
    Join Date
    May 2008
    Posts
    6

    check this

    hi,
    check the below code whether it may satisfy u'r requirement of " don't want to use "multiple" attribute but behaves like multiple selection"


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <SCRIPT LANGUAGE="JavaScript">
    // set the javascript special char here to flag selected value in dropdown
    var selChr = "+";
    //
    function notifySelect(RepSelected){
    var multidropdown = getObject("multidropdown");
    if (RepSelected == "click to view") return false;
    var rep_str ="";
    for (i = 0; i < multidropdown.notify.options.length; i++) {
    if (multidropdown.notify.options[i].value != '') {
    var dropdownItem = multidropdown.notify.options[i].text;
    if (dropdownItem == RepSelected || dropdownItem == selChr+RepSelected) {
    if (dropdownItem.substring(0,1) == selChr) {
    if (confirm("Remove " + RepSelected.substring(1) + " from Past Due notification?")) {
    document.multidropdown.notify.options[i].text = RepSelected.substring(1);
    }
    }
    else {
    if (confirm("Add " + RepSelected + " to Past Due notification?")) {
    document.multidropdown.notify.options[i].text = selChr + RepSelected;
    }
    }
    }
    dropdownItem = multidropdown.notify.options[i].text;
    if (dropdownItem.substring(0,1) == selChr) {
    rep_str = rep_str + multidropdown.notify.options[i].value + ",";
    multidropdown.notify.options[i].style.backgroundColor = "#3366CC";
    multidropdown.notify.options[i].style.color = "#FFFFFF";
    }
    else {
    multidropdown.notify.options[i].style.backgroundColor = "#FFFFFF";
    multidropdown.notify.options[i].style.color = "#000000";
    }
    }
    }
    //end of search
    multidropdown.notify.options[0].selected = true;
    document.multidropdown.notifyReps.value = rep_str;
    }

    //needed for mozilla compatibility
    function getObject(objectId) {
    if (document.all && !document.getElementById)
    return document.all(objectId);
    else
    return document.getElementById(objectId);
    }
    </SCRIPT>
    </HEAD>

    <BODY>
    <FORM name="multidropdown" id="multidropdown" method="post">
    <input type=hidden name="notifyReps" value="">
    <SELECT NAME="notify" id="notify" onchange="notifySelect(this.options[this.selectedIndex].text);">
    <OPTION VALUE="0" selected>click to view</OPTION>
    <OPTION VALUE="1" >hai</OPTION>
    <OPTION VALUE="2" >hello</OPTION>
    <OPTION VALUE="3" >how</OPTION>
    </SELECT>
    <INPUT TYPE="Submit" name="action" value="Submit" >
    </FORM>
    </BODY>
    </HTML>

  9. #9
    Join Date
    Oct 2013
    Posts
    1

    Multi-Select Combobox Javascript Componenet

    In the past I were in similar situation where I needed a combobox with multi-select option. So I developed my own JavaScript component. It is like a regular select but displays check boxes with each item in the list for multiple selection. It also has all option. The best part is that its written in simple JavaScript and no JavaScript library (jquery, dojo, yui etc) is used. One can also extend it using prototypal inheritance. You may look into the following URL for download and usage information:

    <a href="http://asimishaq.com/resources/tools/multi-select-dropdown-list/">Multi-Select Combobox </a>

    Quote Originally Posted by Fahim View Post
    Hi,

    Can someone help me in getting Multi-select drop down javascript.
    I got few javascript which can do this, but my problem is that I don't want to use "multiple" attribute bcoz it turns my select drop down into list box which I don't want. So can someone help on this...

    Thanks & Regards

    Fahim

    ============= Start Code =============
    <HTML>
    <HEAD>
    <TITLE>Select</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function changeValue()
    {
    for (i=0; i<document.form1.Sel1.length;i++)
    {
    if (document.form1.Sel1[i].selected)
    alert(document.form1.Sel1[i].value);
    }
    }
    //-->
    </SCRIPT>
    </HEAD>

    <BODY>
    <form name=form1>
    <select name=Sel1 multiple size=5 onChange="changeValue()">
    <option value=A>A</option>
    <option value=B>B</option>
    <option value=C>C</option>
    </select>
    </form>
    </BODY>
    </HTML>
    ============= End Code =============

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles