Question

只需要为我需要为求职面试构建的程序提供更多帮助＆gt;。对于整个项目，我需要用户能够选择通过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并使用循环/数组的菜鸟啊。帮助:(

Answer 1

将addEventListener添加到if循环之外的select元素。还要使所选元素使用event.target.value

＆＃13;

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);
})

＆＃13;

<select id="select-bar"></select>

＆＃13;

Answer 2

您可以通过多种方式解决此问题，最简单的方法是向每个将调用函数的条目添加onClick事件，并将品种ID作为参数传递。

一个不错的选择是使用一个框架，比如AngularJS（我使用的是这个框架）。但是，这需要你进行一些学习。

从FOR循环中选择SELECT列表中的OPTION

2 个答案: