从文件html填充下拉菜单

Question

一直在尝试从文件中填充一个简单的下拉菜单，在该文件中我将有一个ID和与该ID相关的名称列表：

例如：

id, names
1, ['John', 'Maria', 'Mario']
2, ['Fabio', 'Gary', 'Yanni', 'Charlie']

对于第一个下拉菜单-将显示John，Maria和Mario。单击“下一步”时，将显示Fabio，Gary，Yanni和Charlie。有一个简单的方法可以做到这一点吗？

Answer 1

我将在本演示中使用php。

首先，在发送和接收数据时最好使用JSON格式，但是当然，如​​果您想以其他任何方式使用它，也可以随时这样做。

要获取该数据的Javascript调用，如果您不太了解它是什么或什么是Ajax，我将使用fetch()进行ajax调用，我建议您Check this

如果您有任何疑问，请告诉我。

people.json：

{
    "1":["John", "Maria", "Mario"],
    "2":["Fabio", "Gary", "Yanni", "Charlie"]
}

Javascript：

// making ajax call to data.php which we will look at later
fetch('people.php')
// get data as json
    .then(rawdata => rawdata.json()) 
// here i'm just logging it, but you can do whatever you like with it.
    .then(data => console.log(JSON.parse(data)));

people.php：

// reading file `people.json` content like you would read any file in php
$data = file_get_contents('people.json');
// parsing it to json (array basically) 
$manage = json_decode($data);
// printing the array to the document 
// which is basically the response to the ajax call
print_r($data);

编辑：

或者如果您对后端的数据没有任何工作，则可以直接从Javascript直接请求文件

fetch('data.json')
    .then(rawdata => rawdata.json()) 
    .then(data => console.log(JSON.parse(data)));