如何在JavaScript中加载外部文件？

我正在编写一个脚本，您可以在其中添加和删除语言下拉列表。我让它工作了，但我的问题是，是否有一种方法可以将代码的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;
    });
});

$（函数（）{
var scntDiv=$（“#容器”）；
变量i=$（'#容器p'）.size（）+1；
$（'#addScnt'）.live（'click'，function（））{
$（“我不想在这里有100个选项标记
”）.appendTo（scntDiv）；
i++；
返回false；
});
});

下面是我的代码，它在脚本中带有几个选项标记

---

完整。

您可以将选项放在JSON文件中，并使用AJAX（http）请求加载它们。

您可以将所有数据放在JSON文件中，如下所示（例如）：

现在单击实现以下内容

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

$（'addScnt'）。在（'click'，function（）上{
//获取对select元素的引用
$（'p>
'）。附录（scntDiv）；
var$select=$（'#test`在此处输入代码'）；

//请求JSON数据并解析到select元素中 $.getJSON（'student.JSON'，函数（数据）{ //清除“选择”对话框的当前内容 $select.html（“”）； //迭代数据并附加一个选择选项 $.each（data.student，函数（key，val）{ $select.append（“”+val.name+“”）； }) }); });

---

您可以将语言存储为对象。它可以是静态文件，也可以是动态生成的响应。然后，您可以使用它创建动态选项：

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

您的页面：

[
    {
        '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);
  });
});

$.ajax({
url:“./MyLanguages.json”，
数据类型：“json”
}).完成（功能（数据）{
变量$select=$（“select”）；
$（数据）。每个（函数（）{
$（“”）.text（this.Name）.val（this.Sign）.appendTo（$select）；
});
});

从jQuery 1.7开始，

.live（）

方法已被弃用。使用

.on（）

附加事件处理程序。主要问题是什么,；AJAX是一种方式。在live/on部分更明确一点，因为在您的情况下，

$（document）.on（'click'，'#addScnt'，function（）{/*stuff here*/}）