jQuery的 - 如何閱讀txt文件，並追加到形式

Question

我有幾個文本文件，這樣的內容是這樣的：

<select name='CitySearch' id='CitySearch'> 
    <option value=''>- Select a City -</option> 
    <option value=''>-----------</option> 
    <option value='Bejuco'>Bejuco</option> 
    <option value='Esterillos'>Esterillos</option> 
</select> 

當然每個人都是不同的內容。不管關於文件名，我們可以使用example.txt

我有一張地圖，如果你點擊任何區域，腳本必須在窗體內附加txt。這是你點擊時的功能：

// Assigning an action to the click event 
$(this).click(function(e) { 
    var country_id = $(this).attr('id').replace('area_', ''); 

    if($("div[id^='area_']").length = 1){ 
     $("div[id^='area_']").remove(); //remove the last inserted select option 
     } 
var append_data = '<div id="area_'+country_id+'">**INSERT HTML FROM FILE HERE**</div>'; 
$("#text_boxes").append(append_data); //append new select options in main div 
    }); 

我知道這是basicall的東西，但我沒有太多的經驗與jQuery。

Answer 1

您可以使用.load()來獲取文件的內容並將其插入到匹配的元素中。

var append_data = '<div id="area_'+country_id+'"></div>'; 
$("#text_boxes").append(append_data); //append new select options in main div 

$("#area_"+country_id).load("path/to/file.html"); // load html file 

Answer 2

對文件url進行ajax調用，並將響應追加到字符串。

$(this).click(function(e) { 
     var country_id = $(this).attr('id').replace('area_', ''); 

     if($("div[id^='area_']").length = 1){ 
      $("div[id^='area_']").remove(); //remove the last inserted select option 
      } 
      appendNewResult(country_id); 
     }); 
function appendNewResult(country_id){ 
     $.get(filepath,function(response){ 
         var append_data = '<div id="area_'+country_id+'">' + response +'</div>'; 
    $("#text_boxes").append(append_data); //append new select options in main div 

     }); 
}