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

Question

我想使用 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;
}

但是这段代码仅限于一组列表框，因为我已经对列表框名称“ListITProgramming”和“ListMyITProgramming”进行了硬编码。

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

Answer 1

用已知的硬编码 ID 将列表控件括在老式 HTML 标记中。示例:

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

在您的 Javascript 中，使用 div 的 ID (List1Container) 和 jquery 的“:first-child”选择器访问列表控件。哒哒!您现在可以在完全不知道其 ID 的情况下引用列表控件，因此您不必再进行那些困惑的代码注入(inject)。

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