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

Question

我是 web 开发的新手，目前正在试验 HTML forms。 我正在使用 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);
            });
        }
    
    });

Answer 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
  },
}

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-08-16 03:13:19

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-08-16 03:13:19

解决方案1
0 已采纳 2020-08-16 03:13:19