簡體   English   中英

多重選擇列表框項目而不使用jQuery使用CTRL?

[英]Multiple select listbox item without using CTRL using jquery?

我想在不按住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。 但是它選擇了其他項目,其中哪些項目位於已移動項目的相同位置。 移動物品后

我嘗試了這些鏈接多個選擇列表框,而無需按CTRL鍵如何使用JavaScript從一個列表框asp.net中選擇多個項而無需按CTRL鍵? 什么都沒做

為什么不這樣選擇呢?

 $('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> 

      (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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM