我是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);
});
}
});
我曾经使用过这种结构，我认为它简单但有效，希望它能起作用：
//在您的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
},
}