Multiple item selection of listbox via mouse clicks

If you need to select multiple items of listbox through mouse click rather than pressing CTRL button (may be your application would be use in touch screen input environment) then following code will surely help you.

function start(Obj)
{

var vartext = null;
var varArr = null;
var varbox = Obj;

vartext = document.getElementById(“HidCmd”)

if (vartext.value.search(Obj.value) != -1)
{
vartext.value = vartext.value.replace(Obj.value + “|”, ”);
}
else
{
vartext.value += Obj.value + “|”;
}

varArr = vartext.value.split(“|”)

for(var v=0;v<varArr.length;v++)
{
for(var f=0;f< Obj.options.length;f++)
{
Obj.options[f].selected=false;
}
}

for(var v=0;v<varArr.length;v++)
{
for(var f=0;f< Obj.options.length;f++)
{
if(Obj.options[f].value==varArr[v])
{
Obj.options[f].selected=true;
}
}
}
}

<input id="HidCmd" type="hidden"/>
        <asp:ListBox ID="ListBox1" runat="server" Height="167px"
            SelectionMode="Multiple" Width="124px" onclick="start(this)">
            <asp:ListItem Value="sdfa">sfasfasf</asp:ListItem>
             <asp:ListItem Value="sdfv">sfasfasf</asp:ListItem>
              <asp:ListItem Value="sdfc">sfasfasf</asp:ListItem>
               <asp:ListItem Value="sdfd">sfasfasf</asp:ListItem>
                <asp:ListItem Value="sdfdd">sfasfasf</asp:ListItem>
            </asp:ListBox>

Actually few days back i got this requirement and need to implement that so for every new thing which
i got to do, i do little googling to find out best way as i don’t think so i am the only person on earth
got to do this job 😀 so i find out a thread on asp.net where someone made a function for this task but
that was not exactly according to my requirement and i think the thread initiator requirement as well.
so i modified it to fulfill my requirement and reply that post and now for knowledge sharing just putting
up here for you.

Hope this helps

Thanks

Advertisements

2 responses to “Multiple item selection of listbox via mouse clicks

  1. only 2 item selection is possible

  2. Hey Muhammad,
    I like your article. It does exactly the same thing my code does, but I actually thought I had to use onmousedown event to store the old list values. I was inspired to try this because Access VBA has what they call a SimpleClick or SimpleSelect listbox type.
    My question is this: Do you notice that when selecting values, they is a noticable blink/refresh of the list. I think it looks very unpolished and was wondering if we could figure out a way to make the transition between clicks more seemless. This happens because a click “unselects” all the values and selects a new value before javascript goes in and reselects the old values.
    I was thinking that maybe there is a way to catch the click before it actually changes the listbox. Maybe the mutation events can help?

    Let me know.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s