从由 FOR 循环构成的 SELECT 列表中选择一个 OPTION

埃迪·塔利亚费罗二世

只需要更多关于我需要为面试而构建的程序的帮助 >.< 对于整个项目,我需要用户能够选择狗的品种,这是通过 api 提供的。它在带有选项的下拉/选择菜单中。问题是,我似乎想不出一种方法来指定哪个选项/品种。当我单击一个选项时,我得到的只是列表中的最后一个选项。我可能在这里遗漏了一些非常简单的东西 ahhhhhhh:

var showcase = document.getElementById('showcase');

var select = document.getElementById('select-bar');

var request = new XMLHttpRequest();

// Get data from API endpoint
request.open('GET', 'https://dog.ceo/api/breeds/list', true);

request.onload = function () {
var data = JSON.parse(this.response);
var breeds = data.message;

if (request.status >= 200 && request.status < 400 ) {
 for (var i = 0; i < breeds.length; i++) {

   var opt = document.createElement('option');
   opt.innerHTML = breeds[i];
   opt.value = breeds[i];
   select.appendChild(opt);

}
select.addEventListener("change", function(event) {
  console.log(opt); })
 }
}

request.send();

我是一个 API 和循环/数组的菜鸟啊。帮助 :(

brk

addEventListenerif循环添加to select 元素。Also 获取被选元素使用event.target.value

var showcase = document.getElementById('showcase');
var select = document.getElementById('select-bar');
var request = new XMLHttpRequest();

// Get data from API endpoint
request.open('GET', 'https://dog.ceo/api/breeds/list', true);

request.onload = function() {
  var data = JSON.parse(this.response);
  var breeds = data.message;

  if (request.status >= 200 && request.status < 400) {
    for (var i = 0; i < breeds.length; i++) {

      var opt = document.createElement('option');
      opt.innerHTML = breeds[i];
      opt.value = breeds[i];
      select.appendChild(opt);

    }
  }
}
request.send();

select.addEventListener("change", function(event) {
  console.log(event.target.value);
})
<select id="select-bar"></select>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用赛普拉斯在特定的HTML <select>字段中选择一个<option>?

一个<option>列表,用于多个<select>元素

从由多个列表组成的字典中,从每个列表中选择一个元素

获取由字典构成的列表的索引名称

Symfony爬虫在不带FORM的SELECT列表中选择OPTION

一个班级由另一个班级构成是什么意思?

如何使用Angular JS在更改/选择另一个<select> <option>的项目时禁用<select> <option>

jQuery Multi Select Option-检查是否选择了一个选项

如何从循环中的列表中选择一个随机单词?

如何在for循环中从列表中选择最后一个元素?

如何使用XPath从SELECT列表中获取最后一个OPTION-Scrapy

React Boostrap Select, First Select Option ins 未由 onChange 事件触发

在 select angularjs 中选择第一个选项

如何从下拉列表中选择具有 SELECT OPTION 标签的元素?

使用CSS检测是否在<select>中选择了<option>

如何在Selenium中选择多个元素(不是<Select>-<Option>)

从for循环中选择一个下拉选项

Angular 7:使用mat-select:动态获取mat-option的选项会创建一个永无止境的循环

尝试从由XML字符串数组填充的listView中选择一个项目

从另一个条目中选择一个条目 Select

在列表中查找构成循环参考的3对对的集合

如何为PHP生成的for-each循环的每次迭代从列表中选择一个随机变量?

单击按钮创建一个 SELECT 和一个 OPTION 元素

循环中的Mat-select标签为所有下拉列表选择最后一个值作为默认值

列表中的值的总和,由另一个列表选择

Selenium-如果值在<table>标记内且不在html的<option>下,则从下拉列表中选择一个项目

select(名称).option(值)选择错误的选项?

html select标记:从另一个select标记中选择获取值

在循环中选择时,选择一个,显示多个已选择