Search This Blog

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;
<!--- the following loop is helps to select the selected items in the dropdown programatically --->
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="">
<!--- hidden field is used to hold the values of the selected items in the dropdown. Useful when the value of the items in the dropdown is different than the displayed text for each item in the dropdown. --->
<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')">
<!--- ShowList function is used to display and hide the select dropdown list when the textbox or the image is clicked. HideDropDown function selects or deselects the items in the dropdown list --->
<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>


Step 2.Put the following image file in the folder where you keep your HTML File.Be sure that the image name is "DropDown.bmp"

Step 3.Now Open your HTML file in browser .And select dropdown list values without using control key

2 comments:

amrita said...

Very helpful post it is...Thanx

Manab Ranjan Basu said...

Thanks a Lot Amrita,You can Keep in touch with mail