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;
}

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

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

Answer 1

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

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

在您的Javascript中，使用div的ID（List1Container）和jquery的“：first-child”选择器访问列表控件。塔达！您现在可以在不知道其ID的情况下引用列表控件，因此您不必再执行那些混乱的代码注入。

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

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

1 个答案: