只需要更多关于我需要为面试而构建的程序的帮助 >.< 对于整个项目,我需要用户能够选择狗的品种,这是通过 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 和循环/数组的菜鸟啊。帮助 :(
addEventListener
在if
循环外添加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] 删除。
我来说两句