![](/img/trans.png)
[英]How to select multiple items from a listbox asp.net without pressing the CTRL key using javascript?
[英]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.