Fatal编程技术网
  • javascript/
  • 组合下拉列表未使用javascript jquery getJSON从文本文件生成数据

组合下拉列表未使用javascript jquery getJSON从文本文件生成数据

javascript jquery drop-down-menu combobox

组合下拉列表未使用javascript jquery getJSON从文本文件生成数据,javascript,jquery,drop-down-menu,combobox,getjson,Javascript,Jquery,Drop Down Menu,Combobox,Getjson,我有一个名为country.txt的文本文件。数据存储在所述文件中，如下所示： AF:Afghanistan AX:Åland Islands AL:Albania DZ:Algeria AS:American Samoa AD:Andorra AO:Angola 上述文本文件存储在google drive中 我想在组合下拉列表中获取上述数据。我将代码编写如下： <!DOCTYPE html> <html> <head> <meta

我有一个名为country.txt的文本文件。数据存储在所述文件中，如下所示：

AF:Afghanistan
AX:Åland Islands
AL:Albania
DZ:Algeria
AS:American Samoa
AD:Andorra
AO:Angola
上述文本文件存储在google drive中

我想在组合下拉列表中获取上述数据。我将代码编写如下：

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   </head>
   <body>
      <div>
         <select id="countries" name="countries">
            <option selected="selected" value="--Please Select--">--Please Select--</option>
            $.getJSON("https://googledrive.com/host/0BxPZgr7ebTBdXzdMVWRZZ3FSSjA/country.txt", function( json ) {
               $.each(json, function(key, val) {
                  $('select[name=countries]').append( "<option value='" + key + "'>" + val + "</option>" );
               });
            });  
         </select>
     </div>
   </body>
</html>
我希望获得国家名称以及相应的值，如下所示：

--Please Select—
Afghanistan
Åland Islands
Albania
Algeria
American Samoa
Andorra
Angola
如果有人在这方面帮助我，我将不胜感激。

我认为您的数据文件中存在问题，它不是json文件。您应该在脚本标记中使用$.getJSON。修改文件后，请尝试这样使用：

<!DOCTYPE html>
    <html>
       <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       </head>
       <body>
          <div>
             <select id="countries" name="countries">
                <option selected="selected" value="--Please Select--">--Please Select--</option>
                <script>
                $.getJSON("https://googledrive.com/host/0BxPZgr7ebTBdXzdMVWRZZ3FSSjA/country.txt").success( function( json ) {
                    console.log(json);
                   $.each(json, function(key, val) {
                       console.log(key,val);
                      $('select[name=countries]').append( "<option value='" + key + "'>" + val + "</option>" );
                   });

                }).error(function(error){
                    console.log(error);// currently your data will come here in error.
                });
                </script>
             </select>
         </div>
       </body>
    </html>
但如果仍要使用当前文件进行计数，请使用以下内容替换脚本：

<script>
                $.getJSON("https://googledrive.com/host/0BxPZgr7ebTBdXzdMVWRZZ3FSSjA/country.txt").success( function( json ) {
                    console.log(json);
                   $.each(json, function(key, val) {
                       console.log(key,val);
                      $('select[name=countries]').append( "<option value='" + key + "'>" + val + "</option>" );
                   });

                }).error(function(error){
                     var x= error.responseText.split('\r\n');
                   console.log(x);
                   for(y in x){
                       var z=x[y].split(":");
                       if(z[0].length > 1){
                       $('select[name=countries]').append( "<option value='" + z[0] + "'>" + z[1] + "</option>" );
                       }
                   }
                });
问题是您将javascript代码放在html标记中，这导致代码也被视为标记的一部分。您应该将代码放在脚本标记之间，并将其放在正文底部。

您将数据视为json，但它不是jsonAdded JSFIDLE。首先，我非常感谢您的友好回复。您的第二个代码集已给出成功的结果。“我不知道如果你的问题解决了，请接受答案并结束这里的话题。”Swarupmodaka首先，我非常感谢你的友好回复。您的第二个代码集已给出成功的结果。我想使用您的第一个代码集。为此，我需要准备一个正确的JSON文件。我缺乏创建JSON文件的知识。我创建了如下三行：“{country:['+'{key:AF，val:Afganistan}，+'{key:AX，val:Aland Islands}，+'{key:AL，val:albana}]}；”。看来还是有问题。你能帮帮我吗@用户2466202@suchit@SwarupModak正确的json将是：{country:[{key:AF，val:Afganistan}，{key:AX，val:Aland Islands}，{key:AL，val:albana}]}转到此链接检查json数据并修改它。 
<script>
                $.getJSON("https://googledrive.com/host/0BxPZgr7ebTBdXzdMVWRZZ3FSSjA/country.txt").success( function( json ) {
                    console.log(json);
                   $.each(json, function(key, val) {
                       console.log(key,val);
                      $('select[name=countries]').append( "<option value='" + key + "'>" + val + "</option>" );
                   });

                }).error(function(error){
                     var x= error.responseText.split('\r\n');
                   console.log(x);
                   for(y in x){
                       var z=x[y].split(":");
                       if(z[0].length > 1){
                       $('select[name=countries]').append( "<option value='" + z[0] + "'>" + z[1] + "</option>" );
                       }
                   }
                });