JavaScriptで外部ファイルを読み込む方法は？

Question

言語のドロップダウンリストを追加したり削除したりできるスクリプトを作成しています。私はそれが働いているが、私の質問は、100以上のオプションがあり、リンクがクリックされたときにJavaScriptでロードするので、コードのselectタグ部分を外部化する方法があるかどうかです。私はスクリプト内に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' 
    } 
] 

あなたのページ：jQueryの1.7、 `.live（）のよう

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

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