Time lag on change function I have a script to load a range of number. This range of number is only 200 lengths. However, it has a change function. When the start number is change, the the end number will try to find its range again. 

The whole of code is working fine. However, it gives me a time lag (sometime get crash) on each change.

Can anyone help me to clean this code, please?  



function pad (str, max) 
    {
        str = str.toString();

        return str.length &lt; max ? pad("0" + str, max) : str;
    }

$("#game, #camp").on('change', function(){
    a = $("#game").val(), 
    b = $("#camp").val(),
    j = pad(a,2); 
    k = pad(b,2);
    c = j+k; 

    $("#serial").empty();


    for (var i = 1; i&lt;=200; i++)
         {
             l = pad(i,3)
             $("#manual").append("&lt;option value='"+(c+l)+"'&gt;"+(c+l)+"&lt;/option&gt;");
         }   


var $auto = $('#automatic'),
    $manual = $('#manual'),
    lastValue = +$manual.find('option').last().val();

    $manual.on('change', function () {


        var value = +$(this).val(),
        max = lastValue;

        //alert(max); 

        $auto.empty();

        for (var i = value; i &lt; max; i++) 
            {
                $('&lt;option&gt;', 
                     {
                        value:i+1,  
                        text: i+1
                     }).appendTo($auto);
            }
    }).change()


});
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;select id="game"&gt;
    &lt;option value="01"&gt;01&lt;/option&gt;
    &lt;option value="02"&gt;02&lt;/option&gt;
    &lt;option value="03"&gt;03&lt;/option&gt;
    &lt;option value="04"&gt;04&lt;/option&gt;
    &lt;option value="05"&gt;05&lt;/option&gt;
    &lt;option value="06"&gt;06&lt;/option&gt;
    &lt;option value="07"&gt;07&lt;/option&gt;
&lt;/select&gt;

&lt;select id="camp"&gt;
    &lt;option value="11"&gt;11&lt;/option&gt;
    &lt;option value="22"&gt;22&lt;/option&gt;
    &lt;option value="33"&gt;33&lt;/option&gt;
    &lt;option value="44"&gt;44&lt;/option&gt;
    &lt;option value="55"&gt;55&lt;/option&gt;
    &lt;option value="66"&gt;66&lt;/option&gt;
    &lt;option value="77"&gt;77&lt;/option&gt;
&lt;/select&gt;

&lt;select id="manual"&gt;&lt;/select&gt;
&lt;select id="automatic"&gt;&lt;/select&gt;
Code hygiene

What is $("#serial")?  Did you mean $("#manual").empty() instead?

You are sloppy in localizing your variables.  a, b, j, k, c, l, lastValue, and max (the one in the $manual.on('change') handler) are all global.  All of them are horribly named.  Furthermore, I recommend eliminating unnecessary variables.

Take care to end your statements with a semicolon.  It's considered good practice even though the language doesn't require them.

Performance

There are two major problems.

The first issue is that it is much more efficient to append a giant string all at once than to manipulate the DOM an element at a time.

The second problem is that you are defining a change handler within a change handler.  That means the #manual element gets regenerated more and more frantically with each change in the first two columns.



function pad(str, max) {
    str = str.toString();
    return str.length &lt; max ? pad("0" + str, max) : str;
}

$('#manual').on('change', function() {
    var autoOptions = '';
    var lastValue = +$(this).find('option').last().val();
    for (var i = 1 + +$(this).val(); i &lt;= lastValue; i++) {
        // Should i be padded to 7 digits?
        autoOptions += '&lt;option value="' + i + '"&gt;' + i + '&lt;/option&gt;';
    }

    $('#automatic').html(autoOptions);
});

$("#game, #camp").on('change', function() {
    var gameCamp = pad($('#game').val(), 2) +
                   pad($('#camp').val(), 2);

    var manualOptions = '';
    for (var i = 1; i &lt;= 200; i++) {
        var iii = pad(i, 3);
        manualOptions += '&lt;option value="' + gameCamp + iii + '"&gt;' + gameCamp + iii + '&lt;/option&gt;';
    }
    $('#manual').html(manualOptions)
                .change();
});
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;select id="game"&gt;
    &lt;option value="01"&gt;01&lt;/option&gt;
    &lt;option value="02"&gt;02&lt;/option&gt;
    &lt;option value="03"&gt;03&lt;/option&gt;
    &lt;option value="04"&gt;04&lt;/option&gt;
    &lt;option value="05"&gt;05&lt;/option&gt;
    &lt;option value="06"&gt;06&lt;/option&gt;
    &lt;option value="07"&gt;07&lt;/option&gt;
&lt;/select&gt;

&lt;select id="camp"&gt;
    &lt;option value="11"&gt;11&lt;/option&gt;
    &lt;option value="22"&gt;22&lt;/option&gt;
    &lt;option value="33"&gt;33&lt;/option&gt;
    &lt;option value="44"&gt;44&lt;/option&gt;
    &lt;option value="55"&gt;55&lt;/option&gt;
    &lt;option value="66"&gt;66&lt;/option&gt;
    &lt;option value="77"&gt;77&lt;/option&gt;
&lt;/select&gt;

&lt;select id="manual"&gt;&lt;/select&gt;
&lt;select id="automatic"&gt;&lt;/select&gt;