Javascript 输入更改时阵列未重置

我正在尝试使用输入文本中的值填充选择框。到目前为止，我在填充选择框方面做得很好。但当我将输入字段更改为另一个值时，问题就出现了。选择框不会重置数组，而是在数组末尾添加选项值。这是我的密码：

HTML:

Javascript:

$(document).ready(function(){
    $("select#priority_list").attr("disabled","disabled");
    $('input[name="ttc_list"]').change(function() {
        var arr = [];
        arr.length = 0;
        var ttc = $("#ttc_list").val();

        if(ttc == 100 || ttc == 101)
        {
            var prty100_Start = 40;
            var prty100_End = 80;
                while(prty100_Start < prty100_End+1){
                  arr.push(zeroPad(prty100_Start++,2));
                }
        }
        else
        {
            var prty200_Start = 1;
            var prty200_End = 5;
                while(prty200_Start < prty200_End+1){
                  arr.push(zeroPad(prty200_Start++,2));
                }
        }

        var selectOptions = {
           100: arr,
           101: arr,
           200: arr,
           204: arr,
           210: arr
        }

        $("select#priority_list").removeAttr("disabled");
        console.log($(this).val());
        if(selectOptions[$(this).val()]) 
        {
            console.log(selectOptions[$(this).val()]);
               $.each(selectOptions[$(this).val()], function() { 
                   $('select[name="priority_list"]').append('<option>' + this + '</option>'); 
               });
        }
    });
});

function zeroPad(num, numZeros) {
    var n = Math.abs(num);
    var zeros = Math.max(0, numZeros - Math.floor(n).toString().length );
    var zeroString = Math.pow(10,zeros).toString().substr(1);
    if( num < 0 ) {
        zeroString = '-' + zeroString;
    }
    return zeroString+n;
}

示例：当用户在输入文本中填写“100”时，将选择框从“40”填充到“80”效果很好，但当用户在不刷新页面的情况下将输入文本更改为“200”时，选择框将显示从“40”到“80”和从“01”到“05”的选项，而不仅仅是从“01”到“05”

预期结果：当用户将输入文本更改为“200”而不刷新页面时，选择框仅显示从“01”到“05”的选项

这是我的工作演示

---

要重置数组，我应该将arr.length=0放在哪里？

在添加新项之前，需要清除select元素的内容。。。此外，无需在更改处理程序中重新创建selectOptions对象。。它是一个静态对象，因此只能创建一次，如下所示

$(document).ready(function () {
    var $priority_list = $("#priority_list").prop("disabled", true);

    var selectOptions = {};

    var arr_40_80 = arrays(40, 80);
    selectOptions['100'] = arr_40_80;
    selectOptions['101'] = arr_40_80;

    var arr_1_5 = arrays(1, 5);
    selectOptions['200'] = arr_1_5;
    selectOptions['204'] = arr_1_5;
    selectOptions['210'] = arr_1_5;

    $('input[name="ttc_list"]').change(function () {
        var ttc = $(this).val(), arr = selectOptions[ttc];

        $priority_list.prop("disabled", false).empty();
        if (arr) {
            $.each(arr, function () {
                $priority_list.append('<option>' + this + '</option>');
            });
        }
    });
});

function arrays(start,end){
    var arr = [];
    while (start <= end) {
        arr.push(zeroPad(start++, 2));
    }
    return arr;
}

function zeroPad(num, numZeros) {
    var n = Math.abs(num);
    var zeros = Math.max(0, numZeros - Math.floor(n).toString().length);
    var zeroString = Math.pow(10, zeros).toString().substr(1);
    if (num < 0) {
        zeroString = '-' + zeroString;
    }
    return zeroString + n;
}

演示：

因为您正在使用.append+this+；，每次更改时，都会将新选项添加到现有列表中。相反，您可以使用：

.html('<option value="">Choose TTC First...</option>');    // remove old options

添加新的

---

完整的代码见此。

如果您可以使用jsfiddle@iJay是的，但是如果你没有在我的帖子里看到我的话……哇！这是很好的工作。。。谢谢@SuperScript。。所以我的问题不在我的数组上：。。谢谢你指点out@user2869359那是一个小小的复制错误。。。请参阅更新。。它从您的代码中获得了改进的性能优势

.html('<option value="">Choose TTC First...</option>');    // remove old options

.append('<option>' + this + '</option>');                  // add new options