0

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

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重置我的阵列？

4

2 回答 2

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

演示：小提琴

于 2013-10-11T03:41:45.160 回答
0

因为您正在使用.append('<option>' + this + '</option>');，所以每次更改时都会将新选项添加​​到现有列表中。相反，您可以使用：

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

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

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

添加新的。

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

于 2013-10-11T03:45:55.513 回答