使用JQuery在ASP.Net中的两个ListBox之间移动项

Move items between two ListBoxes in ASP.Net using JQuery

本文关键字：两个 ListBox 之间 移动 JQuery ASP Net 使用      更新时间：2023-09-26

我想使用JQuery/Javascript在ASP.Net中的两个列表框之间移动项，下面是我的代码，它运行得很好。

function AddItems() {
    var totalItemsSelected = 0;
    var CurrentItems = 0;
    var MessageLabel = document.getElementById('<%=lblITProgrammingMessage.ClientID%>');
    var selectedOptions = jQuery('#<%=ListITProgramming.ClientID %> option:selected');
    if (selectedOptions.length == 0) {
        MessageLabel.innerHTML = "Please select skill(s) to add.";
        jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeOut(2000, function () { MessageLabel.innerHTML = ""; });
        jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeIn(500, function () { });
        return false;
    }
    jQuery('select[name$=ListMyITProgramming] > option').each(function () { CurrentItems++; });
    if (CurrentItems == 30) {
        MessageLabel.innerHTML = "Maximum limit (30) is reached. You cannot add any more skills.";
        jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeOut(2000, function () { MessageLabel.innerHTML = ""; });
        jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeIn(500, function () { });
        return false;
    }
    totalItemsSelected = CurrentItems + selectedOptions.length;
    if (totalItemsSelected > 30) {
        MessageLabel.innerHTML = "You can only select " + (30 - CurrentItems) + " item(s) more.";
        jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeOut(2000, function () { MessageLabel.innerHTML = ""; });
        jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeIn(500, function () { });
        return false;
    }
    if (selectedOptions.length == 1) {
        if (jQuery("#<%=ListMyITProgramming.ClientID %> option[value='" + selectedOptions.val() + "']").length > 0) {
        }
        else {
            jQuery('#<%=ListMyITProgramming.ClientID %>').append(jQuery(selectedOptions).clone());
        }
    }
    else if (selectedOptions.length > 1) { jQuery(selectedOptions).each(function () { if (jQuery("#<%=ListMyITProgramming.ClientID %> option[value='" + this.value + "']").length > 0) { } else { jQuery('#<%=ListMyITProgramming.ClientID %>').append(jQuery(this).clone()); } }); }
    jQuery(selectedOptions).remove();
    var hdn2 = "";
    jQuery('select[name$=ListMyITProgramming] > option').each(function () { hdn2 += jQuery(this).attr('value') + ','; });
    jQuery("#<%= listMyITProgrammingValues.ClientID %>").val(hdn2);
    return false;
}

但这段代码仅限于一组ListBox，因为我已经硬编码了ListBox的名称"ListITProgramming"answers"ListMyITProgramming"。

有人能用现有函数中的两个参数来实现这一动态吗？

用一个已知的硬编码ID将列表控件封装在一个老式的HTML标记中。示例：

<DIV id="List1Container">
    <ASP:ListBox runat="server" id="list1"/>
</DIV>

在Javascript中，使用div的ID（List1Container）和jquery的"：first child"选择器访问列表控件。大大！现在，您可以在完全不知道列表控件ID的情况下引用该列表控件，这样就不必再进行混乱的代码注入了。

额外的好处：使用这种技术，你现在可以编写完全静态的.js文件，这意味着你可以使用缩小和缓存，并大大提高性能。

相关文章：