Làm thế nào để tải một tập tin bên ngoài trong JavaScript?

Question

Tôi đang viết một tập lệnh để bạn có thể thêm và xóa danh sách ngôn ngữ thả xuống. Tôi đã nhận nó làm việc nhưng câu hỏi của tôi là nếu có một cách để externalize phần chọn thẻ của mã như tôi sẽ có hơn 100 tùy chọn và tải nó trong JavaScript khi một liên kết được nhấp chuột. Tôi không muốn có 100 thẻ tùy chọn trong tập lệnh. Về phía PHP, tôi sử dụng câu lệnh include để tải danh sách các tùy chọn của mình.

Đây là vấn đề của tôi.

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

đây là mã của tôi chạy với một vài thẻ tùy chọn trong tập lệnh.

Đầy đủ code.

Answer 1

Bạn có thể đặt tất cả các dữ liệu của bạn vào một tập tin JSON như dưới đây (Ví dụ):

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

Bây giờ trên nhấp chuột Thực hiện những điều sau

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

Bạn có thể đặt các tùy chọn trong tệp JSON và tải chúng bằng cách sử dụng yêu cầu AJAX (http).

Answer 3

Bạn có thể lưu trữ ngôn ngữ của bạn như các đối tượng. Nó có thể là tệp tĩnh hoặc phản hồi được tạo động. Sau đó, bạn có thể sử dụng nó cho động lực tùy chọn tạo:

MyLanguages.json:

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

Trang của bạn:

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

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