使用vanilla JS在.map之后用API中的数据填充select (下拉列表)
使用vanilla JS在.map之后用API中的数据填充select (下拉列表)可以通过以下步骤实现：
- 首先，使用fetch函数从API中获取数据。例如，可以使用以下代码获取数据：
fetch('API_URL')
.then(response => response.json())
.then(data => {
// 在这里处理数据
})
.catch(error => {
console.error('Error:', error);
});- 在fetch的回调函数中，可以使用.map方法遍历数据并创建option元素。例如，可以使用以下代码创建option元素：
const select = document.getElementById('selectId');
data.map(item => {
const option = document.createElement('option');
option.value = item.value;
option.text = item.text;
select.appendChild(option);
});- 将创建的option元素添加到select元素中。在上述代码中，selectId是HTML中select元素的id。
这样，使用vanilla JS在.map之后就可以将API中的数据填充到select下拉列表中了。
对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，无法提供相关链接。但是，腾讯云提供了丰富的云计算服务，包括云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品。
相关·内容
1回答
当试图从javascript中设置选定选项时，我遇到了问题。我从mysql创建了一个select并添加了php选项，如下所示：
<select class="form-control input-group-lg" name="progress" id="progress">
<?php
if ($conn === false) {
die("ERROR: Could not connect. " . mysqli_connect_error());
}
$sql = "SELECT
浏览 1提问于2022-02-28得票数 0
回答已采纳
是否可以使用javascript修改select选项并添加另一行选项？
如下所示：
<select>
<option value ="1">1</option>
<option value ="2">2</option>
<option value ="3">3</option>
</select>
这方面：
<select>
<option value ="1">1</op
浏览 3提问于2015-11-02得票数 0
回答已采纳
<!DOCTYPE html>
<html>
<body>
<select id='selectid' onchange="selectchange()">
</select>
<script>
for (let i=0;i<10;i++)
{
var select = document.getElementById("selectid");
var option = document.createElement("option");
浏览 6提问于2021-12-18得票数 2
回答已采纳
因此，基本上，我让这个狗API ()和im试图以某种方式循环，并将API服务器中的每一个狗的名字显示到我的标签中，这样人们就可以选择狗的名称，并显示有关它的照片和信息。
<label for="dogs" name="dogsInput" id="dogsLabel">
<select id="dogTypes">
<option value=""></option>
</select>
// JavaScript
浏览 1提问于2022-07-12得票数 -1
3回答
我想使用javascript在下拉列表中有多个值，这样就不需要在select标签的选项中写很多值，所以我使用了下面的代码来实现，但它在internet explorer中打开时显示了不可见的值，这意味着分配的空间是可见的，但在chrome & firefox中它什么也不显示。
<script>
function Time(){
selectHr();
selectMin();
selectSec();
}
function selectHr()
{
f
浏览 0提问于2014-02-21得票数 0
我正在尝试使用嵌入式JavaScript在html中创建一个包含下拉列表内容的SQLite字段。这是我拥有的代码，但它不能工作。
<select>
<option value="default">Select a test to edit</option>
<script>
var db = openDatabase('ExamSQL', '1.0', 'database')
浏览 1提问于2016-01-22得票数 1
1回答
我正在开发一个网络应用程序。我从数据库中检索数据，并使用$row = mysqli_fetch_array()将其存储到一个数组中。问题是，这个数组应该使用echo json_encode($array)传递给ajax，但我不知道如何从ajax成功函数接收它，顺便说一下，我使用的是jQuery.parseJSON()。之后，我将把数组中的值附加到一个<option>元素中。 get_AssetModel.php： $sqlGetAssetModels = "select * from tblbrands where brand_name like '$phpGet
浏览 21提问于2019-09-07得票数 0
回答已采纳
我在业余时间从事一个项目已经有一段时间了。我目前正在尝试存储数据以供以后使用。
let weapons = [
{
type: "Revolver",
bMats: 60,
cTime: 50,
},
{
type: "Rifle",
bMats: 100,
cTime: 70,
},
{
type: "Shotgun",
bMats: 120,
cTime: 80,
}
];
这是阵列中所有对象的一个小示例。我使用以下代码创建选项：
let wSelect = document.getElementById(
浏览 9提问于2018-08-25得票数 0
回答已采纳
对于Select Box和OptGroup，我有一个有点奇怪的行为:我使用OptGroup，并试图在最后添加一个项目，我希望它超出了OptGroup。FF按预期执行，但IE将其添加到OptGroup中
使用以下代码： (注意: JQuery只是用于.ready方法，我不能在我的项目中使用)
<select id="selectbox">
<optgroup label="optGroup1">
<option>aaaa</option>
</optgroup>
</
浏览 7提问于2014-03-06得票数 4
回答已采纳
我需要你的帮助创建一个函数，允许我根据给定的变量从下拉框中选择一个给定的选项名称(使用javascript)，如果值不存在，则将其添加到下拉列表中，然后选择它。
示例：
<html>
<head>
<script type="text/javascript">
function test() {
var option_name_to_look_for = "mangos"
if option_name_to_look_for is listed in the drop down box (drop) then sel
浏览 0提问于2012-12-14得票数 1
回答已采纳
2回答
我已经创建了一个课程容器，我想通过从后端获取选项来填充这些选项 (网址：https://ffcc-app.herokuapp.com/get/courses) <div class="container">
<form action="#" method="POST">
<h2>Course 1</h2>
<div class="select-box">
<div class="opt
浏览 51提问于2021-08-03得票数 0
回答已采纳
2回答
在一个简单的任务上需要帮助，尝试了几种不同的方法，但看起来我在这两个方面都缺少了一些东西。我想创建一个有年数的下拉菜单。到目前为止，我的尝试如下，Nr1：
function selectOne(){
var select - document.getElementById('year')
for(var i=1950;i<1960;++i){
var option = document.createElement('option');
option.text = option.
浏览 1提问于2013-11-11得票数 0
回答已采纳
3回答
我有一个通用的下拉列表填充脚本，它用从各种jquery调用返回的选项填充select。它当前用于单个选择。我需要向它添加填充多选的能力，它按原样工作，但我不想包括初始的*请选择*选项。我正在寻找一个jQuery或普通的Javascript解决方案。
if (dropdown != null) {
var regList = document.getElementById(dropdown);
regList.options.length = 0;
var opt = document.createElement("option");
// **
浏览 0提问于2015-10-28得票数 10
回答已采纳
我有这个JavaScript+HTML来填充下拉菜单，但是它不起作用，我做错什么了吗？注意:我希望在页面加载时填充下拉菜单。
<!DOCTYPE html>
<html>
<head>
<script>
function addList(){
var select = document.getElementById("year");
for(var i = 2011; i >= 1900; --i) {
var option = document.createE
浏览 5提问于2013-08-24得票数 29
回答已采纳
我明白了：
警告:数组或迭代器中的每个子元素都应该有一个唯一的“键”支柱。
下面是我的下拉组件代码：
render() {
let dropDownClasses = [classes["im-dropdown"], classes[this.state.size], classes[this.state.dropStyle], classes[this.status]];
let itemcount = -1;
let options;
if(this.state.options !== undefined){
opti
浏览 0提问于2018-10-18得票数 1
2回答
如何使用数组创建所有美国州的select下拉菜单？我在我的.js文件中写了以下内容：
var usStates = [
{ name: 'ALABAMA', abbreviation: 'AL'},
{ name: 'ALASKA', abbreviation: 'AK'},
{ name: 'AMERICAN SAMOA', abbreviation: 'AS'},
{ name: 'ARIZONA', abbreviation: '
浏览 3提问于2015-07-16得票数 2
回答已采纳
我现在有以下数据：
[
{
"value": "G1-1",
"text": "One",
"optgroup": "Group 1
},
{
"value": "G1-2",
"text": "Two",
"optgroup": "Group 1"
},
{
&
浏览 1提问于2018-12-10得票数 5
回答已采纳
3回答
我有一个数组，对于数组中的每一项，我尝试添加一个新的<option>。
为此，我尝试了以下方法：
array.forEach(function(arr) {
console.log(array);
$(".filterSection .department").append('<option value="'+array+'">'+array+'</option>');
});
但是，该选项仅打印<option>中的所有数组值。它创建新的option
浏览 14提问于2020-02-18得票数 0
我不明白为什么它没有定义。在控制器中，Create设置类别下拉列表。
public IActionResult Create()
{
var model = new TechnicialSpecsViewModel();
List<Product> categories = _productService.GetAllParents();
model.CategoryList = (from i in categories
select new SelectListItem
浏览 0提问于2018-07-14得票数 1
1回答
我正在创建一个表单，它要求候选人发布关于他们以前的教育历史的信息-以下是表单的截图和附在他们身上的代码！
以下是我的javascript代码：
<script>
function removeFields1(){
//var container1 = document.getElementById("container1");
//container1.removeChild(input);
}
function addFields1(){
var container = document.getElementById
浏览 0提问于2015-01-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
