使用axois使用javascript api在下拉列表中动态填充数据

Question

这是一个下拉列表，包含世界上排名第一和其他的

城市和数据将使用javascript API和Axios 动态填充在下拉列表中

带有外部Apis。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">---Top Cities---</option>
<option value="2">Mumbai</option>
<option value="3">Delhi</option>
<option value="1">Bengaluru</option>
<option value="2">Chennai</option>
<option value="3">Kolkata</option>
<option value="2">---Other Cities---</option>
<option value="3">Bhavnagar</option>
<option value="3">Udaipur</option>
<option value="3">Pune</option>
</select>

[
{ "id": "1", "name": "Mumbai", "state": "Maharashtra" },
{ "id": "2", "name": "Delhi", "state": "Delhi" },
{ "id": "3", "name": "Bengaluru", "state": "Karnataka" },
{ "id": "4", "name": "Ahmedabad", "state": "Gujarat" },
{ "id": "5", "name": "Hyderabad", "state": "Telangana" },
{ "id": "6", "name": "Chennai", "state": "Tamil Nadu" },
{ "id": "7", "name": "Kolkata", "state": "West Bengal" }
]

Answer 1

let options = [
{ "id": "1", "name": "Mumbai", "state": "Maharashtra" },
{ "id": "2", "name": "Delhi", "state": "Delhi" },
{ "id": "3", "name": "Bengaluru", "state": "Karnataka" },
{ "id": "4", "name": "Ahmedabad", "state": "Gujarat" },
{ "id": "5", "name": "Hyderabad", "state": "Telangana" },
{ "id": "6", "name": "Chennai", "state": "Tamil Nadu" },
{ "id": "7", "name": "Kolkata", "state": "West Bengal" }
]
const select = document.querySelector(".form-select");
options.map(val=>{
let opt = document.createElement("option");
opt.innerText = val.name
select.appendChild(opt);
})

只需将其添加到javascript文件中即可。

Answer 2

• 创建"OPTION"元素
• 使用setAttribute设置其value
• 将其更新为select元素

const topCities = [
{ "id": "1", "name": "Mumbai", "state": "Maharashtra" },
{ "id": "2", "name": "Delhi", "state": "Delhi" },
{ "id": "3", "name": "Bengaluru", "state": "Karnataka" },
{ "id": "4", "name": "Ahmedabad", "state": "Gujarat" },
{ "id": "5", "name": "Hyderabad", "state": "Telangana" },
{ "id": "6", "name": "Chennai", "state": "Tamil Nadu" },
{ "id": "7", "name": "Kolkata", "state": "West Bengal" }
]
const otherCities = [
{ "id": "1", "name": "Bhavnagar", "state": "Bhavnagar" },
{ "id": "2", "name": "Udaipur", "state": "Udaipur" },
{ "id": "3", "name": "Pune", "state": "Pune" },
];
const select = document.querySelector('select');
function addOption(label, value) {
const option = document.createElement("OPTION");
option.setAttribute('value', value);
const text = document.createTextNode(label);
option.appendChild(text);
select.appendChild(option);
}
addOption("---Top Cities---", "1");
topCities.forEach((city) => {
addOption(city.name, city.id);
});
addOption("---Other Cities---", "2");
otherCities.forEach((city) => {
addOption(city.name, city.id);
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
</select>