strategies for loading data into a textarea

I have a system where the user can select templates from a dropdown menu of up to 300 options.

When the user selects one, a readonly textarea is filled with a corresponding string of l开发者_StackOverflow中文版ength <= 1000 characters.

When the page loads, should I:

• store them all in a JavaScript variable, and reference the variable on the select change?
• load the content via ajax when the select changes?

You seem to already know the answer: you can preload the templates into your HTML, but then the page becomes large and slow to download, with most of the templates never being used. If you use AJAX, only the minimum necessary information gets downloaded.

You could set a function on click:

var infoArray = new Array();

$('item').click(function() {
    var itemName = $(this).attr('id');

    if(infoArray[itemName] !== undefined)
    {
        $('loader').empty().load('url', function() { 
            infoArray.push({itemName:$('loader').text()});
        });
    } else {
        $('loader').empty().append(infoArray[itemName]);
    }
});