如何使用 JSON 数据填充 <select> 并在单击时显示值？

Posted 2023-03-05

【中文标题】如何使用 JSON 数据填充 <select> 并在单击时显示值？

【英文标题】：How can I populate <select> with JSON data and display values when clicked?

【发布时间】：2020-07-24 09:40:36

【问题描述】：

我一直在尝试这样做，但我只能将数据填充到 html 的 select 中。

2 个问题。

第一季度。 我能够使用 AJAX 从 API 获取 JSON 数据。 （使用 AJAX 是因为我了解到它不需要浏览器刷新即可获取新数据）：

    $(document).ready(function() 
  getDataJson();
);

function getDataJson(ajaxurl) 
  $.ajax(
    method: "GET",
    url: "https://corona.lmao.ninja/v2/jhucsse",  
    datatype: "json",
    success: onSuccess,
    error: onError
  );

接下来我尝试在我的 HTML 中填充 OnSuccess 上的选择：

function onSuccess(jsonReturn) 
  $("#dropdown").empty();

  //console.log(jsonReturn);

  let dropdown = $('#dropdown');

dropdown.empty();

dropdown.append('<option selected="true" disabled>Choose Country</option>');
dropdown.prop('selectedIndex', 0);


// Populate dropdown with list of countries

  $.each(jsonReturn, function (key, entry) 
    dropdown.append($('<option></option>').attr('value', entry.data).text(entry.data));
  );
  
  
    var $dropdown = $('#dropdown'),
        $objView = $('#objView'),
        $docFragment = $(document.createDocumentFragment());

for (var prop in jsonReturn) 
    $('<option/>', 
        val: prop,
        text: prop
    ).appendTo($docFragment);


$dropdown.append($docFragment);

$dropdown.on('change', function() 
    var objString = JSON.stringify(jsonReturn[$dropdown.val()]);

    objString = objString.replace(/[\\\[\]\"]*/ig, '');    // Remove unwanted chars
    objString = objString.replace(/\,/ig, '<br/>');         // Replace commas with new lines (i.e. br tags)

    $objView.html(objString);
);

$dropdown.trigger('change');     
    


//if JSON fails
function onError() 
  $("#dropdown").html("i failed.");

它奏效了。但随后我尝试执行我想做的下一步，即当我单击一个国家/地区的名称时，它应该显示其 JSON 数据的其余部分以及名称及其值。How to display JSON data on click with javascript 这不是确切的，但足够接近，但它是一个非常不同（困难？对我来说）我无法理解的解决方案。

目前我的下拉列表如下所示：JSFIDDLE

现在我打算这样做Populate HTML Table with Certain Items from a JSON Array

但每个国家/地区的所有其他 JSON 数据都是这样的How to display JSON data on click with JavaScript

如何解决剩下的脚本？

Q2.如何减少 AJAX 获取延迟？

即使数据较少，我也注意到了一点滞后/缓慢。还是只是正常现象？

【参考方案1】：

第一季度的答案

首先，我准备了这3个变量，以使其更简单。

let jsonResponseContainer = []
let dropdown = $("#dropdown")
let objView = $("#objView")

然后在文件准备好时准备这个

$(document).ready(function() 
    // Initiate everything
    getDataJson();
  
    // Move dropdown change to standalone
    dropdown.on('change', function() 
        let chosenResponse = JSON.stringify(jsonResponseContainer[$("#dropdown").val()])
    
        // Remove unwanted chars
        chosenResponse = chosenResponse.replace(/[\\\[\]\"]*/ig, '');
        chosenResponse = chosenResponse.replace(/\,/ig, '<br/>');
    
        // Change objView
        objView.html(chosenResponse)
    )
);

你的 ajax 是

function getDataJson(ajaxurl) 
  $.ajax(
    method: "GET",
    url: "https://corona.lmao.ninja/v2/jhucsse", 
    datatype: "json",
    success: onSuccess,
    error: onError
  );

我做了一个函数来填充下拉列表

function populateDropdown(index, data)
    let newOption = "<option value=\"" + index + "\">" + data + "</option>"
    dropdown.append(newOption)

我所做的主要更改

function onSuccess(jsonReturn) 
// Populate container with ajax return directly
jsonResponseContainer = jsonReturn

// Do what you need to do
dropdown.empty();
dropdown.append('<option selected="true" disabled>Choose Country</option>');
dropdown.prop('selectedIndex', 0);

// Populate dropdown with list of countries
  $.each(jsonReturn, function (key, entry) 
    populateDropdown(key, entry.country);
  );

//if JSON fails
function onError() 
  $("#objView").html("i failed.");

请注意，我将jsonReturn 复制到另一个变量只是为了确保现在可以在任何地方访问数据。接下来是您的 on-change 侦听器被置于循环中，我将其移出循环。现在，我用字符串制作<option>（如果你愿意，你可以用片段改变它）。请注意，我使用键（jsonReturn 的数组键与jsonResponseContainer 相同）创建值。当 on-change 监听器被触发时，它只需要从数组中检索到<pre>。

第二季度的答案

我不明白，我想这不是你的错。

注意：如果我使用了错误的语法，我深表歉意。