輸入發生變化時陣列不重置

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

由於您使用.append('<option>' + this + '</option>');，每次你改變你添加新的選項到現有列表。相反，你可以使用：

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

重置select並刪除舊的選項，然後使用：

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

添加新的。

查看完整的代碼這個JSFiddle。

Answer 2

您需要在添加新項目之前清除選擇元素的內容......也不需要在更改處理程序中重新創建對象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