Javascript 创建一个动态下拉表单，使用JQuery从JSON文件加载数据_Javascript_Jquery_Html_Json

Javascript 创建一个动态下拉表单，使用JQuery从JSON文件加载数据

javascript jquery html json

Javascript 创建一个动态下拉表单，使用JQuery从JSON文件加载数据,javascript,jquery,html,json,Javascript,Jquery,Html,Json,在一个课堂上，我被要求用HTML5和JavaScript制作一个动态下拉菜单。我做到了现在，我需要从JSON文件调用数据。我查看了关于SOF的其他答案，但仍然不了解如何使用JQuery从JSON文件中获取信息我需要有两个字段：第一个字段是国家。JSON键为country，值为state。可以找到JSON文件和内容的副本。第二个下拉字段仅添加与其关联国家/地区相关的值/数组这是我的HTML5文件的副本： <!DOCTYPE html> <ht

在一个课堂上，我被要求用HTML5和JavaScript制作一个动态下拉菜单。我做到了

现在，我需要从JSON文件调用数据。我查看了关于SOF的其他答案，但仍然不了解如何使用JQuery从JSON文件中获取信息

我需要有两个字段：第一个字段是国家。JSON键为

country

，值为

state

。可以找到JSON文件和内容的副本。第二个下拉字段仅添加与其关联国家/地区相关的值/数组

这是我的HTML5文件的副本：

        <!DOCTYPE html>
        <html lan="en">
            <head>
        <!--        <script type="text/javascript" src="sampleForm.js"></script>-->
        <!--    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> -->
                <script type="text/javascript" src="getData.js"></script>
                <script type="text/javascript" src="moreScript.js"></script>
            <meta charset="UTF-8";
                <title>Select Country and State</title>
                <link rel="stylesheet" href="formStyle.css" />
            </head>
            <body>
          <form id="locationSelector" enctype='application/json'>
                <br id="selectCountry"></br>
                <select id='country'></select>
                <br id="selectState">=</br>
                <select id='state'></select>
            </form>
          </body>
        </html>

本应至少向字段添加值，但网页上只显示空框

然后，我需要做一个类似于at的条件语句，但调用或引用JSON文件中的数据

我只学了一些HTML和JavaScript课程，没有学JQuery和JSON。因此，您的帮助将大大增加我的知识，我将非常感谢

谢谢

我找到了这个，并将我的JS文件更改为以下内容：

    $(document).ready(function()
    {
    $('#locationSelector').click(function() {

        alert("entered in trial button code");

            $.ajax({
                type: "GET",
                url:"countryState.JSON",
                dataType: "json",
                success: function (data) {
                    $.each(data.country,function(i,obj)
                    {
                     alert(obj.value+":"+obj.text);
                     var div_data="<option value="+obj.value+">"+obj.text+"</option>";
                    alert(div_data);
                    $(div_data).appendTo('#locator');
                    });
                    }
              });
            });
    });

$（文档）.ready（函数（）
{
$（“#locationSelector”）。单击（函数（）{
警报（“输入试用按钮代码”）；
$.ajax({
键入：“获取”，
url:“countryState.JSON”，
数据类型：“json”，
成功：功能（数据）{
美元/个（数据、国家/地区、功能（i、obj）
{
警报（对象值+”：“+对象文本）；
var div_data=“”+对象文本+”；
警报（分区数据）；
$（div_数据）；
});
}
});
});
});

并且，我编辑了我的HTML文档，如下所示：

  <form id="locationSelector" enctype='application/json'></form>

我删除并重新添加了

标记，至少通过以下操作，我得到了一个空白框：

 `<form id="locationSelector" enctype='application/json'>
    <select id="locator"></select>
</form>`

`
`

我感觉自己越来越近了，但还是迷路了

你能试试这个吗：

 $.get("countryState.JSON", function( data ) {
            var html = "";
        $.each(data.d, function(i, el) {
          console.log(el);
          html += "<option value='"+Your value+"'>"+Your displayed text+"</option>";
      });
      $('#state').html(html);
});

$.get（“countryState.JSON”，函数（数据）{
var html=“”；
$.each（数据d、函数i、el）{
控制台日志（el）；
html+=“”+您显示的文本+“”；
});
$（'#state'）.html（html）；
});

很乐意帮忙。您需要对json文件使用ajax get请求。需要注意的是，如果使用静态文件（即没有Web服务器）进行本地测试，这可能不起作用，因为您通常无法使用ajax获取本地文件。有关更多信息，请参阅。我不知道。我正在使用Firefox在Windows 7上使用本地文件。我是将此

$替换为$获取代码还是添加到文件中@Hydrothermal@host_255$.get
只是$.ajax（{键入：“get”）的快捷方式…因此您可以使用其中任何一个。我不认为在Firefox中可以绕过本地AJAX问题，因此您很可能需要安装一个轻量级Web服务器。您的值是要从变量e1中检索的值，可能是国家id或国家值（）。您显示的文本是要显示的值。（也可从变量e1中获取）
 `<form id="locationSelector" enctype='application/json'>
    <select id="locator"></select>
</form>`

 $.get("countryState.JSON", function( data ) {
            var html = "";
        $.each(data.d, function(i, el) {
          console.log(el);
          html += "<option value='"+Your value+"'>"+Your displayed text+"</option>";
      });
      $('#state').html(html);
});