2017-02-14 151 views
0

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

到此为止我已经提出,代码工作正常。当用户选择限制的项目,然后单击按钮,所选的项目应取消选择再次

Output Page

TotalQuantity从1stLeft不允许移动。一旦显示警报消息,则应从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); 
     } 
    } 
} 

UPDATE

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

我使用了多选择此代码。这是否让我错了取消选择?

感谢

+0

你添加一些色彩时:悬停? – SilentCoder

+0

@SilentCoder Nope –

+0

它是如何得到颜色的呢? – SilentCoder

回答

0

试试这个,

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

它不起作用 –

+0

当我在选择列表项后看到控制台时,它没有在代码上被选中。你明白我在说什么吗? –

+0

然后尝试'$('option:active',this).remove();' – SilentCoder

相关问题