如何使用Jquery单击Button时删除SELECTED Listbox Item?

时间:2017-02-14 09:40:13

标签: javascript jquery asp.net listbox

我有2个名为lstLeft and listRowField的Asp ListBox。当用户从 1stLeft 中选择项目并单击该按钮时,它将移动到另一个列表框(listRowField)但限制(某些项目不应移动) 即可。

  

直到我已经做过,代码工作正常。当用户选择受限制的项目并单击按钮时,应再次取消选择所选项目

Output Page

  

1stLeft的TotalQuantity不允许移动。一旦显示警告消息,1stLeft中的选择颜色就应该删除。

我尝试了这段代码,但无效

$('#rightRow').click(function () {       

    var options = $("[id*=lstLeft] option:selected");

    for (var i = 0; i < options.length; i++) {
        if ($(options[i]).val() === 'TotalQuantity' || $(options[i]).val() === 'ExtendedPrice' || $(options[i]).val() === 'ExtendedCost' || $(options[i]).val() === 'Profit') {

            alert($(options[i]).val() + " is not allowed to Data Field");

            //I tried these TWO CODES. But it doesn't work.

            //$('.multiselectOptions:selected', this).remove();
            $("#lstLeft option[value=" + $(options[i]).val() + "]").attr("selected", false);
        }
        else {
            var opt = $(options[i]).clone();

            $(options[i]).remove();
            $("[id*=listRowField]").append(opt);
        }
    }
}

更新

//Multiselection
$('.multiselectOptions').mousedown(function (e) {
    e.preventDefault();
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    return false;
});


<asp:ListBox ID="lstLeft" class="form-control" runat="server" SelectionMode="Multiple" Height="260px" onclick="ListBoxClient_SelectionChanged(this, event);">
   <asp:ListItem class="multiselectOptions" Value="StoreID">StoreID</asp:ListItem>
   <asp:ListItem class="multiselectOptions" Value="ItemLookupCode">ItemLookupCode</asp:ListItem>
   <asp:ListItem class="multiselectOptions" Value="ExtendedDescription">ExtendedDescription</asp:ListItem>
   <asp:ListItem class="multiselectOptions" Value="SubDescription1">SubDescription1</asp:ListItem>
   <asp:ListItem class="multiselectOptions" Value="DepartmentName">DepartmentName</asp:ListItem>
   <asp:ListItem class="multiselectOptions" Value="CategoryName">CategoryName</asp:ListItem>
   <asp:ListItem class="multiselectOptions" Value="SupplierCode">SupplierCode</asp:ListItem>
   <asp:ListItem class="multiselectOptions" Value="SupplierName">SupplierName</asp:ListItem>
   <asp:ListItem class="multiselectOptions" Value="TotalQuantity">TotalQuantity</asp:ListItem>
   <asp:ListItem class="multiselectOptions" Value="ExtendedPrice">ExtendedPrice</asp:ListItem>
   <asp:ListItem class="multiselectOptions" Value="ExtendedCost">ExtendedCost</asp:ListItem>
   <asp:ListItem class="multiselectOptions" Value="Profit">Profit</asp:ListItem>
   <asp:ListItem class="multiselectOptions" Value="UnitOfMeasure">UnitOfMeasure</asp:ListItem>
   <asp:ListItem class="multiselectOptions" Value="CustomerAccountNumber">CustomerAccountNumber</asp:ListItem>
   <asp:ListItem class="multiselectOptions" Value="CustomerName">CustomerName</asp:ListItem>
</asp:ListBox>
  

此代码我用于多选。这是否让我失去了选择权?

由于

1 个答案:

答案 0 :(得分:0)

试试这个,

$('option:selected', this).remove();