Question

我想在没有按住CTRL键的情况下进行多选。我在下面的代码中尝试了 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;
}

这是我的列表框项目

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

此代码正常运行。但问题是，在我将多选项目移动到另一个列表框后，当我再次单击以选择列表项目时，它会自动选择其他项目处于已移动的相同位置。

首次选择一切正确

第二次我在列表框的最后一项中仅选择SupplierName。但是它选择其他项目的项目位于移动项目的相同位置。

我尝试了这些链接Multiple select listbox without pressing CTRL，How to select multiple items from a listbox asp.net without pressing the CTRL key using javascript?   什么都没有用

Answer 1

为什么不自行选择：

＆＃13;

$('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();
  }
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

      (function($){ 
            $.fn.selectMultiple = function(){ 
                return this.mousedown(function(e){ 
                    var elem = this;
                    offY = 0;
                    offX = 0;
                    while(elem.offsetParent != null)
                    {
                        offY += elem.offsetTop;
                        offX += elem.offsetLeft;
                        elem = elem.offsetParent;
                    }
                    if (window.pageXOffset + offX + e.currentTarget.scrollLeft + e.currentTarget.offsetWidth < e.clientX + e.currentTarget.offsetWidth-e.currentTarget.scrollWidth)
                        return;
                    Height = Math.floor( this.clientHeight/e.currentTarget.size); // Height of an option;
                    index = Math.floor((window.pageYOffset + e.clientY + e.currentTarget.scrollTop - offY-this.clientTop-1)/Height); // index of option
                    e.preventDefault(); 
                    e.currentTarget[index].selected =  !e.currentTarget[index].selected;
                    $(this).focus();
                }).mousemove(function(e){e.preventDefault()});
                }; 
          })(jQuery);

$（'select [multiple =“ multiple”]'）。selectMultiple（）; 在IE 11，Edge和Chrome上均可使用

多个选择列表框项目而不使用CTRL使用jquery？

2 个答案: