使用 JQuery 在 ASP.Net 中的两个列表框之间移动项目答案

【问题标题】：Move items between two ListBoxes in ASP.Net using JQuery使用 JQuery 在 ASP.Net 中的两个列表框之间移动项目
【发布时间】：2013-08-07 09:41:55
【问题描述】：

我想使用 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”和“ListMyITProgramming”。

任何人都可以在现有函数中使用两个参数来实现这个动态吗？

【问题讨论】：

只是不要硬编码。您将使代码更易于为自己和他人扩展和修复
你能帮我解决 ListBox 名称的连接问题吗？因为我尝试过使用“var selectedOptions = jQuery('#

标签： javascript jquery asp.net listbox jquery-events

【解决方案1】：

将列表控件包含在带有已知硬编码 ID 的老式 HTML 标记中。示例：

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

在您的 Javascript 中，使用 div 的 ID (List1Container) 和 jquery 的 ":first-child" 选择器访问列表控件。达达！您现在可以在完全不知道其 ID 的情况下引用列表控件，因此您不必再进行那种混乱的代码注入。

奖励：使用此技术，您现在可以编写完全静态的 .js 文件，这意味着您可以使用压缩和缓存并大大提高性能。

【讨论】：