Portal And Content Management: Multi select Dropdown control

2009-04-27

Multi select Dropdown control

Multi select dropdown is not available in the HTML Control or ASPX control.We can create the multi select dropdown using combo box ,textbox and an image.The multiselect dropdwn control will be look like as follows.

Code:

Step 1.Create an HTML file and copy the following HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>MultiSelect Dropdown List</TITLE>
<SCRIPT Language="javaScript">
function ShowList(textID,fieldid){

if(document.getElementById(fieldid).style.display == 'none') //if the dropdown is not displayed, display the dropdown below the textbox.
{
document.getElementById(fieldid).style.display = 'inline';
var lsobj=document.getElementById(textID);
var lscurleft = 0;
var lscurtop = 0;
if (lsobj.offsetParent) {
do {
lscurleft += lsobj.offsetLeft;
lscurtop += lsobj.offsetTop;
} while (lsobj = lsobj.offsetParent);
}
document.getElementById(fieldid).style.left=lscurleft;
document.getElementById(fieldid).style.top=lscurtop + 22;
}
else
{
document.getElementById(fieldid).style.display = 'none';
}
}

function HideDropdown(fieldname,textfield,hiddenfield)
{
var lsnewStr="";
var lsnewVal="";
var lsCurrentSelectedvalue=document.frmMultiSelect[fieldname].value;
var lsCurrentSelected= document.frmMultiSelect[fieldname].options[document.frmMultiSelect[fieldname].selectedIndex].text;
lsCurrentSelected = lsCurrentSelected.replace(/^\s+\s+$/, ''); // used to trim the selected text in the dropdown

var lsSelectedDisplayValues= document.frmMultiSelect[textfield].value;
var lsSelectedValue= document.frmMultiSelect[hiddenfield].value;

if(lsSelectedDisplayValues.indexOf(lsCurrentSelected) == -1) // if the selected item is not selected earlier
{
document.frmMultiSelect[textfield].value+=lsCurrentSelected + ";";
document.frmMultiSelect[hiddenfield].value+=lsCurrentSelectedvalue + ";";
}
else // if the current selected item is already selected, it removes the current selected item in the list displayed in the text box
{
document.frmMultiSelect[textfield].value=lsSelectedDisplayValues.replace(lsCurrentSelected + ";","");
document.frmMultiSelect[hiddenfield].value=lsSelectedValue.replace(lsCurrentSelectedvalue + ";","");
}

var larr_col=document.frmMultiSelect[textfield].value.split(";"); // splits the value in the hidden field in to an aray list
var larr_col_text = document.frmMultiSelect[hiddenfield].value.split(";"); // splits the value in the textbox field in to an aray list

document.frmMultiSelect[fieldname].selectedIndex = -1;
var i;

for(i=0;i<=document.frmMultiSelect[fieldname].length-1;i++) // loop through the entire list in the select dropdown
{
var lspart_num=0;
while (lspart_num < larr_col.length-1)
{
if(document.frmMultiSelect[fieldname].options[i].value==larr_col_text[lspart_num])
{
var lstemp = document.frmMultiSelect[fieldname].options[i].text;
lstemp = lstemp.replace(/^\s+\s+$/, ''); // trims the leading spaces for the selected item
lsnewStr+= lstemp+";"; // this variable stores the dispalyed text of the selected items in the dropdown
document.frmMultiSelect[fieldname].options[i].selected = true;
lsnewVal+= document.frmMultiSelect[fieldname].options[i].value+";"; //this variable stores the value of the selected items in the dropdown
}
lspart_num++;
}
}
document.frmMultiSelect[textfield].value = lsnewStr;
document.frmMultiSelect[hiddenfield].value = lsnewVal;
}
</SCRIPT>
</Head>
<BODY LINK="#3300FF" ALINK="#3300FF" VLINK="#3300FF">
<FORM NAME="frmMultiSelect" ACTION="" METHOD="Post">
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD ALIGN="CENTER">
<SPAN STYLE="">SELECT MULTIPLE VALUES IN A DROPDOWN LIST WITHOUT USING CTRL KEY</SPAN>
</TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD ALIGN="CENTER">
<SPAN><B>Select Country:</B></SPAN>
<INPUT TYPE="hidden" NAME="hdnCountryValue" VALUE="">

<INPUT TYPE="text" NAME="txtCountryText" READONLY STYLE="Width:280px;" VALUE="" ONCLICK="Javascript:ShowList('txtCountryText','CountryId')"><IMG SRC="./DropDown.bmp" ALIGN="Top" ONCLICK="Javascript:ShowList('txtCountryText','CountryId')">

<DIV STYLE="Z-INDEX:1;POSITION:absolute;DISPLAY:none;" ID="CountryId">
<SELECT MULTIPLE="Yes" NAME="cboCountry" STYLE="Width: 300px;" SIZE="6" onChange="Javascript:HideDropdown('cboCountry', 'txtCountryText','hdnCountryValue')" onBlur = "Javascript:ShowList('txtCountryText','CountryId')">
<OPTION selected value=""></OPTION>
<OPTION VALUE="Afghanistan">Afghanistan</OPTION>
<OPTION VALUE="Albania">Albania</OPTION>
<OPTION VALUE="Algeria">Algeria</OPTION>
<OPTION VALUE="Antarctica">Antarctica</OPTION>
<OPTION VALUE="Argentina">Argentina</OPTION>
<OPTION VALUE="Australia">Australia</OPTION>
</SELECT>
</DIV>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>