Массив не сбрасывается при изменении ввода

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

Demo: Fiddle