如何根据下拉输入加载 JSON 数据？答案

【问题标题】：How to load JSON data based on a dropdown input?如何根据下拉输入加载 JSON 数据？
【发布时间】：2020-08-16 00:50:01
【问题描述】：

我是 Web 开发的新手，目前正在尝试使用 HTML 表单。我正在使用 Chrome 测试如何根据使用 jQuery 从标签中进行的选择在 div 中显示 JSON 数据，但我的代码无法正常工作。当我检查我的网页时，它显示了要加载的 JSON 的 div，但是从下拉菜单中选择一个元素后数据本身不存在。另外，如果这有什么不同，我正在使用样式表。我是不是搞错了？

<json>
    {
        "firstName": "Jason",
        "lastName": "Bourne"
    },
    {
        "firstName": "John",
        "lastName": "McClane"
    }

<html>
    <div id="names">
            <select id ="drop-list">
                <option value="" disabled="disabled" selected="selected">--Select A Name--</option>
                <option>Jason Bourne</option>
                <option>John McClane</option>
    </select>
    </div>

<javascript>
    $(function() {
    
        let names = $('#names');
        dropList.on('select', getDataViaAjax);
    
        function getDataViaAjax(evnt) {
            let request = $.ajax({
                method: 'GET',
                url: 'people.json',
                dataType: 'json',
            });
    
            request.done(function(data) {
                console.log(data);
                let dropList = $('#drop-list');
                for (let person of data) {
                    let newParagraph = $('<p>');
                    newParagraph.text(person.firstName + ' last name ' + person.lastName);
                    dropList.append(newParagraph);
                }
            });
    
            request.fail(function(response) {
                console.log('ERROR:' + response.statusText);
            });
        }
    
    });

【问题讨论】：

你在哪里加载数据？您想从下拉列表中选择一个选项，然后通过 ajax 获取该人的详细信息并将其显示在某处？请添加一些说明。
是的，我正在使用 HTML、JSON、Javascript 和本地服务器制作网站。在网站上，当我从菜单中选择 Jason Bourne 时，我希望 JSON 文件中存储的数据（名字和姓氏）显示在网页上。 people.json 文件如下所示： { "firstName": "Jason", "lastName": "Bourne" }
另外，您没有将任何数据传递给您的 ajax 以在 people.json 中搜索名称 - people.json 看起来如何？请在您的问题中添加people.json！
还有什么是 dropBox 变量？不应该是dropList.append(');
也使用 dropList.empty();在请求中执行 for 循环之前，否则您将不断增加下拉列表的大小。

标签： javascript jquery json forms

【解决方案1】：

我曾经使用过这种结构，我认为它简单但有效，希望它有效：

//在你的html中

<form>
  <select id="filterAgendas">
  </select>
</form>

//在应用程序中，js

$.ajax({
  url: 'YourJsonFileLocation',
  type: 'GET',
                  
  success: function(response) {
    console.log(response);
    
    const list = JSON.parse(response);
        
    let filter = '';
    
    list.forEach(list => {

            filter +=    `<option value="${list.id}"> ${list.name}</option>`
    });

    $('#filterAgendas').html(filter);                 
  }
});

//你的json文件

{
  {
    id: 1,
    name: name1
  },
  {
    id: 2,
    name: name2
  },
}

【讨论】：