如何在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;
    });
});

這是我的代碼，在腳本中帶有一些選項標簽。

完整代碼 。

Answer 1

您可以將語言存儲為對象。 它可以是靜態文件，也可以是動態生成的響應。 然后，您可以將其用於動態選項創建：

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

Answer 2

您可以將選項放在JSON文件中，然后使用AJAX（http）請求加載它們。

Answer 3

您可以將所有數據放入如下的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>');
          })
        });
        });