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 

     }); 
}