Question

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

HTML：

<input type="text" name="ttc_list" id="ttc_list" />
<select name="priority_list" id="priority_list">
    <option value="">Choose TTC First...</option>
</select>

使用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”的选项

这是我的工作演示http://jsfiddle.net/danc32/6UqYS/1/。

我应该在哪里放置arr.length = 0来重置我的阵列？

Answer 1

在添加新项之前，您需要清除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;
}

演示：Fiddle

Answer 2

由于您使用的是.append('<option>' + this + '</option>');，因此每次更改时都会将新选项添加到现有列表中。相反，你可以使用：

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

重置select并删除旧选项，然后使用：

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

添加新的。

有关完整代码，请参阅此JSFiddle。

输入更改时，数组不重置

2 个答案: