Multi-select drop down javascript

This site is best viewed in a modern browser with JavaScript enabled.

Fahim

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">

</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 =============

phpnovice

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.

Fahim

So. there is no way I through which I can achiev Multi-select drop down ???

phpnovice

Not with normal FORM elements. You would have to go with a DHTML effect to achieve your desired goal.

Fahim

So can u give me that code ??

phpnovice

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.

llanitedave

As a hint, you might activate a hidden <div> that becomes visible only when you click the menu.

jyothi_challa

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.value != '') {
var dropdownItem = multidropdown.notify.options.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.text = RepSelected.substring(1);
}
}
else {
if (confirm("Add " + RepSelected + " to Past Due notification?")) {
document.multidropdown.notify.options.text = selChr + RepSelected;
}
}
}
dropdownItem = multidropdown.notify.options.text;
if (dropdownItem.substring(0,1) == selChr) {
rep_str = rep_str + multidropdown.notify.options.value + ",";
multidropdown.notify.options.style.backgroundColor = "#3366CC";
multidropdown.notify.options.style.color = "#FFFFFF";
}
else {
multidropdown.notify.options.style.backgroundColor = "#FFFFFF";
multidropdown.notify.options.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>

asim709

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>

Fahim;518885 wrote:
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">

</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 =============