Multiple select listbox item without using CTRL using jquery?

Question

I want to do multiselect without holding CTRL key. I tried this below code from StackOverFlow

<script type="text/javascript">
var selectedClientPermissions = [];
function pageLoad() {
    window.alert("Test1");
    var ListBox1 = document.getElementById("<%= lstLeft.ClientID %>");

    for (var i = 0; i < ListBox1.length; i++) {
        selectedClientPermissions[i] = ListBox1.options[i].selected;
        window.alert(ListBox1.length);
    }
}
function ListBoxClient_SelectionChanged(sender, args) {
    var scrollPosition = sender.scrollTop;
    for (var i = 0; i < sender.length; i++) {
        if (sender.options[i].selected) selectedClientPermissions[i] = !selectedClientPermissions[i];

        sender.options[i].selected = selectedClientPermissions[i] === true;
    }
    sender.scrollTop = scrollPosition;
}

This is my list box items

<div class="row" style="padding-top: 10px;">
    <div class="col-lg-3">
        <asp:ListBox ID="lstLeft" class="form-control" runat="server" SelectionMode="Multiple" Height="220px" onclick="ListBoxClient_SelectionChanged(this, event);">
        <asp:ListItem Value="Item Lookup Code">ItemLookupCode</asp:ListItem>
        <asp:ListItem Value="Qty">Qty</asp:ListItem>
        <asp:ListItem Value="Total Price">Total Price</asp:ListItem>
        <asp:ListItem Value="Child Item Lookup Code1">ChildItemLookupCode1</asp:ListItem>
        <asp:ListItem Value="Child1Qty">Child1Qty</asp:ListItem>
        <asp:ListItem Value="Total Price1">Total Price1</asp:ListItem>
        <asp:ListItem Value="Child Item Lookup Code2">ChildItemLookupCode2</asp:ListItem>
        <asp:ListItem Value="Child2Qty">Child2Qty</asp:ListItem>
        <asp:ListItem Value="Total Price2">Total Price2</asp:ListItem>
        <asp:ListItem Value="Child Item Lookup Code">ChildItemLookupCode</asp:ListItem>
        <asp:ListItem Value="Child3Qty">Child3Qty</asp:ListItem>
        <asp:ListItem Value="Total Price3">Total Price3</asp:ListItem>
        <asp:ListItem Value="Total Quantity">Total</asp:ListItem>
        <asp:ListItem Value="Extended Price">ExtendedPrice</asp:ListItem>
        <asp:ListItem Value="Department Name">DepartmentName</asp:ListItem>
        <asp:ListItem Value="Category Name">CategoryName</asp:ListItem>
        <asp:ListItem Value="Supplier Name">SupplierName</asp:ListItem>
        </asp:ListBox>
    </div>
    <div class="col-lg-1" style="padding-top: 70px; padding-left: 30px;">
        <input type="button" id="right" value=">>"/>
        <input type="button" id="left" value="<<" />
    </div>
    <div class="col-lg-3">
        <asp:ListBox ID="FirstRight" runat="server" SelectionMode="Multiple" Width="100%" Height="220"></asp:ListBox>
        <asp:HiddenField ID="HiddentxtSelectedColumn" runat="server" />
    </div>
</div>

This code is working. But the problem is, after I moved the multiselected items to another list box,when i click again to select the list items, it's automatically selecting the other items which items are in the same position which was moved already.

First time select everything is correct

Second Time I select only SupplierName in the last item of listbox. But its selecting the other items which items are in the same positions of moved items.

I tried these links Multiple select listbox without pressing CTRL, How to select multiple items from a listbox asp.net without pressing the CTRL key using javascript? Nothing worked

aLx13 aLx13 · Accepted Answer · 2017-01-04T11:37:12

Why not make your own select like so:

$('ul li').click(function(){
	if($(this).hasClass('selected')){
  	$(this).removeClass('selected');
  } else {
  	$(this).addClass('selected');
  }
});
var $select = $('select');
$('#add').click(function(){
	var $selectedElemes = $('ul li.selected');
  if($selectedElemes.length > 0){
  	$selectedElemes.each(function(){
    	if($select.find('option[value="'+ $(this).data('val') +'"]').length == 0){
      	$select.append('<option value="'+ $(this).data('val') +'">'+ $(this).text() +'</option>');
      }
    });
  }
});
$('#remove').click(function(){
	var $selectedOption = $select.find('option:selected');
  if($selectedOption.length > 0){
  	$selectedOption.remove();
  }
});

ul {
  display: inline-block;
  width: 100px;
  list-style-type: none;
}
li {
  background: #fff;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}
li.selected {
  color: white;
  background: blue;
}
select {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-val="test 1">test 1</li>
  <li data-val="test 2">test 2</li>
  <li data-val="test 3">test 3</li>
  <li data-val="test 4">test 4</li>
  <li data-val="test 5">test 5</li>
</ul>
<button id="remove"><<</button>
<button id="add">>></button>
<select name="tobox" size="6"></select>

Multiple select listbox item without using CTRL using jquery?

2 Answers