Question

我在for循环中填充了2个下拉控件，两个控件都是包含相同数据（数月或季度）的telerik下拉列表。奇怪的是，这段代码的结果是一个控件从Jan-Dec开始排序，但另一个是逆转，Dec-Jan（monthToDropdown）。我已经修复了第二个代码块的问题，但是想了解为什么会发生这种情况，某种参考问题？

以下是生成交替下拉列表的代码：

 function PeriodChoiceIndexChange(sender, args) {

    var itemText = args.get_item()._text;

    var monthToDropDown,  monthFromDropDown ;

    monthToDropDown = $find("<%= ToMonthDropDown.ClientID %>");
    monthFromDropDown = $find("<%= FromMonthDropDown.ClientID %>");

    var months = new Array();
    months[0] = "Jan";
    months[1] = "Feb";
    months[2] = "Mar";
    months[3] = "Apr";
    months[4] = "May";
    months[5] = "Jun";
    months[6] = "Jul";
    months[7] = "Aug";
    months[8] = "Sep";
    months[9] = "Oct";
    months[10] = "Nov";
    months[11] = "Dec";

    var quarters = new Array();
    quarters[0] = "Q1";
    quarters[1] = "Q2";
    quarters[2] = "Q3";
    quarters[3] = "Q4";

    monthToDropDown.trackChanges();
    monthToDropDown.clearItems();
    monthToDropDown.commitChanges();
    monthFromDropDown.trackChanges();
    monthFromDropDown.clearItems();
    monthFromDropDown.commitChanges();

    if (itemText == "Quarterly") {
        for (var i = 0; i < quarters.length; i++) {
            var comboItem = new Telerik.Web.UI.RadComboBoxItem();
            comboItem.set_text(quarters[i]);
            comboItem.set_value(quarters[i]);
            monthToDropDown.trackChanges();
            monthToDropDown.get_items().add(comboItem);
            monthToDropDown.commitChanges();
            monthFromDropDown.trackChanges();
            monthFromDropDown.get_items().add(comboItem);
            monthFromDropDown.commitChanges();
        }
    } else {
        for (var i = 0; i < months.length; i++) {
            var comboItem = new Telerik.Web.UI.RadComboBoxItem();
            comboItem.set_text(months[i]);
            comboItem.set_value(months[i]);
            monthToDropDown.trackChanges();
            monthToDropDown.get_items().add(comboItem);
            monthToDropDown.commitChanges();
            monthFromDropDown.trackChanges();
            monthFromDropDown.get_items().add(comboItem);
            monthFromDropDown.commitChanges();
        }
    }

    return false;
}

以下是以相同顺序填充两个控件的代码：

    if (itemText == "Quarterly") {
        for (var i = 0; i < quarters.length; i++) {
            var comboItem = new Telerik.Web.UI.RadComboBoxItem();
            comboItem.set_text(quarters[i]);
            comboItem.set_value(quarters[i]);
            var comboItem1 = new Telerik.Web.UI.RadComboBoxItem();
            comboItem1.set_text(quarters[i]);
            comboItem1.set_value(quarters[i]);
            monthToDropDown.trackChanges();
            monthToDropDown.get_items().add(comboItem);
            monthToDropDown.commitChanges();
            monthFromDropDown.trackChanges();
            monthFromDropDown.get_items().add(comboItem1);
            monthFromDropDown.commitChanges();
        }
    } else {
        for (var i = 0; i < months.length; i++) {
            var comboItem = new Telerik.Web.UI.RadComboBoxItem();
            comboItem.set_text(months[i]);
            comboItem.set_value(months[i]);
            var comboItem1 = new Telerik.Web.UI.RadComboBoxItem();
            comboItem1.set_text(months[i]);
            comboItem1.set_value(months[i]);
            monthToDropDown.trackChanges();
            monthToDropDown.get_items().add(comboItem);
            monthToDropDown.commitChanges();
            monthFromDropDown.trackChanges();
            monthFromDropDown.get_items().add(comboItem1);
            monthFromDropDown.commitChanges();
        }
    }

正如你在解决问题时所看到的那样，我想了解这种逆转背后的理论

Answer 1

@nnnnnn所说的above是正确的。在循环中，我们将元素添加到第一个下拉列表，然后尝试将其添加到第二个下拉列表中。但是，在第二个下拉列表中添加相同的元素会将其从第一个下拉列表中删除。

我创建了一个SSCCE来说明实际发生的情况。

function PeriodChoiceIndexChange(sender, args) {
    var monthToDropDown = $find("ToMonthDropDown"),
        monthFromDropDown = $find("FromMonthDropDown");

    var months = new Array();
    months[0] = "Jan";
    months[1] = "Feb";

    monthFromDropDown.trackChanges();
    monthFromDropDown.clearItems();
    monthFromDropDown.commitChanges();

    monthToDropDown.trackChanges();
    monthToDropDown.clearItems();
    monthToDropDown.commitChanges();

    for (var i = 0; i < months.length; i++) {
        var comboItem = new Telerik.Web.UI.RadComboBoxItem();
        comboItem.set_text(months[i]);
        comboItem.set_value(months[i]);

        alert("[" + i + "][0] From Count = " + monthFromDropDown.get_items().get_count() + "; To Count = " + monthToDropDown.get_items().get_count());

        monthFromDropDown.get_items().add(comboItem);
        alert("[" + i + "][1] From Count = " + monthFromDropDown.get_items().get_count() + "; To Count = " + monthToDropDown.get_items().get_count());

        monthToDropDown.get_items().add(comboItem);
        alert("[" + i + "][2] From Count = " + monthFromDropDown.get_items().get_count() + "; To Count = " + monthToDropDown.get_items().get_count());
    }

    alert("[PeriodChoiceIndexChange] End");

    return false;
}

运行此命令时，您将获得以下输出：

Loop  Alert0  Alert1  Alert2
0     0, 0    1, 0    0, 1
1     0, 1    1, 1    0, 2

要修复当前方法，只需更改最后一个块以重新实例化该项，如下所示：

var comboItem = new Telerik.Web.UI.RadComboBoxItem();
comboItem.set_text(quarters[i]);
comboItem.set_value(quarters[i]);
monthToDropDown.trackChanges();
monthToDropDown.get_items().add(comboItem);
monthToDropDown.commitChanges();

comboItem = new Telerik.Web.UI.RadComboBoxItem();
comboItem.set_text(quarters[i]);
comboItem.set_value(quarters[i]);
monthFromDropDown.trackChanges();
monthFromDropDown.get_items().add(comboItem);
monthFromDropDown.commitChanges();

Javascript for loop reversing array

1 个答案: