需要创建一个来自fetch的选项列表

Question

如何修复此代码以检索每次只能选择一个的选项列表?

static all(){
return fetch("http://localhost:3000/categories", {
headers:{
"Accept": "application/json",
"Content-Type": "application/json"
}
})
.then(res => {
if(res.ok){
return res.json()
} else{
return res.text().then(error => Promise.reject(error))
}
})
.then(categoryArray => {
this.collection = categoryArray.map(attrs => new Category(attrs))
let categoryList = this.collection.map(c => c.render())
this.container().append(...categoryList)
return this.collection
})
}

render() {

this.element ||= document.createElement('select');
this.element.class = "container";
this.nameOp  ||= document.createElement('option');
this.nameOp.class = "container-category";
this.nameOp.textContent = `Category: ${this.title}`;
this.element.append(this.nameOp);
return this.element;
}

现在上面的代码正在为我拥有的每个类别创建一个选择列表。

Answer 1

所以基本上只需要添加标签到我的HTML中然后使用getelemetByid

render() {

this.element ||= document.getElementById('categories-Select');
this.element.classList.add(..."px-6 py-3 text-left text-xs font-medium text-black-500 uppercase tracking-wider bg-green-600".split(" "));
this.nameOp  ||= document.createElement('option');
this.nameOp.class = "container-category selectCategoryid";
this.nameOp.textContent = `Category: ${this.title}`;
this.element.append(this.nameOp);
return this.element;
}

，这允许我选择来自fetch请求的每个类别。