Как загрузить внешний файл в JavaScript?

Question

Я пишу сценарий, в котором вы можете добавить и удалить раскрывающийся список языков. Я получил его работу, но мой вопрос заключается в том, есть ли способ экстернализировать часть тега select кода, поскольку у меня было бы более 100 опций и загружать ее в JavaScript при щелчке ссылки. Я не хочу иметь 100 тегов параметров внутри скрипта. На стороне PHP я использую оператор include для загрузки моего списка параметров.

Здесь моя проблема.

$(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; 
    }); 
}); 

вот мой код, который работает с несколькими тегами параметров в скрипте.

Полный code.

Answer 1

Вы можете поместить все ваши данные в файл Json, как показано ниже (например):

{"student": [ 
    { 
    "id": "1", 
    "name": "Person1" 
    }, 
    { 
    "id": "2", 
    "name": "Person2" 
    }, 
    { 
    "id": "3", 
    "name": "Person3" 
    } 
]} 

Теперь по щелчку Реализовать следующие

 $('#addScnt').on('click', function() { 
    //get a reference to the select element 
$('<p><select id="test"></select></p>').appendTo(scntDiv); 
     var $select = $('#test`enter code here`');</code> 

     //request the JSON data and parse into the select element 
     $.getJSON('student.JSON', function(data){ 

      //clear the current content of the select 
      $select.html(''); 

      //iterate over the data and append a select option 
      $.each(data.student, function(key, val){ 
      $select.append('<option id="' + val.id + '">' + val.name + '</option>'); 
      }) 
     }); 
     }); 

Answer 2

Вы можете поместить параметры в файл JSON и загрузить их с помощью запроса AJAX (http).

Answer 3

Вы можете хранить свои языки в качестве объектов. Это может быть либо статический файл, либо динамически сгенерированный ответ. Затем, вы можете использовать его для создания динамических параметров:

MyLanguages.json:

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

Ваша страница:

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

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