How to load an external file in JavaScript?

Question

I am writing a script where you can add and remove a drop-down list of languages. I got it working but my question is if there is a way to externalize the select tag part of the code as I would have more than 100 options and load it in JavaScript when a link is click. I don't want to have 100 option tags within the script. On the PHP side I use the the include statement to load my list of options.

This is where my problem is.

$(function() {
    var scntDiv = $('#container');
    var i = $('#container p').size() + 1;

    $('#addScnt').live('click', function() {
        $('<p><select>I DONT WANT TO HAVE 100 OPTION TAGS HERE</select></p>').appendTo(scntDiv);
        i++;
        return false;
    });
});

here is my code that runs with a few option tags in the script.

Full code.

Answer 1

You can store your languages as objects. It can be either a static file or dynamically generated response. Then, you can use it for dynamical options creation:

MyLanguages.json:

[
    {
        'Name': 'English',
        'Sign': 'EN'
    },
    {
        'Name': 'Spanish',
        'Sign': 'ES'
    },
    {
        'Name': 'Russian',
        'Sign': 'RU'
    }
]

Your page:

$.ajax({
    url: './MyLanguages.json',
    dataType: 'json'
}).done(function(data) {
  var $select = $("select");

  $(data).each(function() {
    $("<option/>").text(this.Name).val(this.Sign).appendTo($select);
  });
});

Answer 2

You can put the options in a JSON file and load them using AJAX (http) request.