Wie lade ich eine externe Datei in JavaScript?

Question

Ich schreibe ein Skript, in dem Sie eine Dropdown-Liste von Sprachen hinzufügen und entfernen können. Ich habe es funktioniert, aber meine Frage ist, ob es eine Möglichkeit gibt, den Select-Tag Teil des Codes zu externalisieren, da ich mehr als 100 Optionen haben würde und laden Sie es in JavaScript, wenn ein Link klickt. Ich möchte nicht 100 Options-Tags innerhalb des Skripts haben. Auf der PHP-Seite verwende ich die include-Anweisung, um meine Optionsliste zu laden.

Hier ist mein Problem.

Hier ist mein Code, der mit ein paar Optionstags im Skript ausgeführt wird.

Voll code.

Answer 1

Sie können wie unten alle Ihre Daten in eine JSON-Datei setzen (zum Beispiel):

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

Klicken Sie nun auf Implementieren der folgenden

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

Sie können die Optionen in eine JSON-Datei einfügen und sie mithilfe der AJAX (http) -Anfrage laden.

Answer 3

Sie Ihre Sprachen als Objekte speichern können. Dies kann entweder eine statische Datei oder eine dynamisch generierte Antwort sein. Dann können Sie es für dynamische Optionen Erstellung verwenden:

MyLanguages.json:

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

Ihre Seite:

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

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