Javascript 如何从Obj加载下拉菜单_Javascript_Html_Json_Object

Javascript 如何从Obj加载下拉菜单

javascript html json object

Javascript 如何从Obj加载下拉菜单,javascript,html,json,object,Javascript,Html,Json,Object,我是JS新手，我想询问一下如何在页面DOM加载后使用Javascript和下面定义的对象填充下拉菜单。我看了这里和其他地方的一些例子；然而，我仍然不清楚如何做到这一点。在下面的代码中，我不太明白opt.innerHTML中应该包含什么？是ul li元素带有指向对象的变量吗？谢谢你在这方面的帮助 const score = document.querySelector('#score'); const output = document.querySelector('#output'); co

我是JS新手，我想询问一下如何在页面DOM加载后使用Javascript和下面定义的对象填充下拉菜单。我看了这里和其他地方的一些例子；然而，我仍然不清楚如何做到这一点。在下面的代码中，我不太明白opt.innerHTML中应该包含什么？是ul li元素带有指向对象的变量吗？谢谢你在这方面的帮助

const score = document.querySelector('#score');

const output = document.querySelector('#output');

const answerSelect = document.querySelector('#selAnswers');

const categorgySelect = {
    
    Category: 'Sports',
    Category: 'Art',
    Category: 'Vehicles',
    Category: 'History',

};

const difficultySelect = {
    
    Difficulty: 'easy',
    Difficulty: 'medium',
    Difficulty: 'hard',
    

};

let categoryPick = document.querySelector('#category');

document.addEventListener('DOMContentLoaded', function() {
         for(let index in categorySelect) {
            let opt = document.createElement('option');
            opt.value = categorySelect;
            opt.innerHTML = ???

            categorySelect.appendChild(opt);
         }
});



<!doctype html>
<html lang="en">
<head>
    <title>l</title>
    <link rel='stylesheet' href='css/Trivia.css' >
</head>
<body>
    <h1>Trivia</h1>
    <div>Score: <span id="score">Correct 0 Wrong 0</span></div>
    <br>
    <div> 
        <label>Select Category:</label>
        <select id='category'></select>
        <br> 
        <label>Select Difficulty:</label>
        <select id='difficulty'></select>
    </div>
    <br><br>
    <div id="output"></div>
    <br>
    <div id="selAnswers"></div>
    <br>`enter code here`
    <button id="btn">Get First Question!</button>
    <script src ='js/Trivia.js'></script>
</body>
</html>

const score=document.querySelector（“#score”）；
const output=document.querySelector（“#output”）；
const answerSelect=document.querySelector（'selsanswers'）；
常量类别选择={
类别:"体育",，
类别:"艺术",，
类别:"车辆",，
类别:"历史",，
};
常数难度选择={
难度：“容易”，
难度：'中等'，
难度：“难”，
};
让categoryPick=document.querySelector（“#category”）；
document.addEventListener（'DOMContentLoaded'，function（）{
for（让目录中的索引选择）{
让opt=document.createElement（'option'）；
opt.value=类别选择；
opt.innerHTML=？？？
categorySelect.appendChild（opt）；
}
});
L
琐事
分数：纠正0错误0


选择类别：


选择难度：






`在这里输入代码`
第一个问题！

您的对象应该具有唯一的键

尝试使用数组而不是对象

const categorgySelect = [ 'Sports', 'Art', 'Vehicles', 'History' ];
const difficultySelect = [ 'easy', 'medium', 'hard' ];

像这样更新For循环

let opt = document.createElement('option');
opt.value = categorySelect[index];
opt.innerHTML = categorySelect[index];
categoryPick.appendChild(opt)

您必须附加到

选择
参考：
对象：
数组：
您的对象应该具有唯一的键
尝试使用数组而不是对象
const categorgySelect = [ 'Sports', 'Art', 'Vehicles', 'History' ];
const difficultySelect = [ 'easy', 'medium', 'hard' ];

像这样更新For循环
let opt = document.createElement('option');
opt.value = categorySelect[index];
opt.innerHTML = categorySelect[index];
categoryPick.appendChild(opt)

您必须附加到选择
参考：
对象：
数组：
首先，在const categorgySelect
中键入：您可能是指categorySelect


另外，“select”在这里并不适合作为一个名称，最好只称它为类别
。同样适用于困难选择

将多个值指定给一个特性：
const categorgySelect={
类别:"体育",，
类别:"艺术",，
// ...
类别：“历史”
};

这将覆盖任何以前定义的值，这意味着对象将只保留该属性的最后一个值（此处：Category:'History'
）
要保存值数组，请使用：

注意不同的括号[]
，因为我们现在使用数组文字创建数组，而不是使用对象文字创建对象
const categorgySelect=[
"体育",，
“艺术”，
// ...
“历史”
];

这同样适用于困难选择

现在，在DOMContentLoaded
侦听器中，我们想用
s填充
s。这可以很容易地使用一个。

注意：A for…循环对象的可枚举属性，而A循环对象的可枚举属性（MDN详细介绍了该属性）。对于数组，它们可能看起来很相似，但却完全不同。一般来说，一个人需要一个for…of循环，但总是试着想想你想循环什么
我们可以使用Element.innerHTML
（最好使用预构建的字符串），或者Element.append（）
将选项添加到选择的元素中
以下是使用上述两种方法填充的两个选择：

const categories=[//固定名称
"体育",，
“艺术”，
"车辆",，
“历史”
];
const难点=[//更好的名称
“容易”，
“中等”，
“硬的”
];
document.addEventListener（'DOMContentLoaded'，function（）{
//移动到侦听器内部以释放命名空间
让categorySelect=document.querySelector（“#category”）；
让困难选择=document.querySelector（“#困难”）；
让html=''；
对于（分类项目）{
//追加使用模板文本创建的字符串
html+=`${item}`；
}
categorySelect.innerHTML=html；
关于（让我们来谈谈困难）{
让opt=document.createElement（'option'）；
//如果未明确定义，将使用其.textContent作为值
opt.textContent=项目；
难选。追加（opt）；
}
});
label{display:block}

选择类别：
选择难度：
首先，在const categorgySelect
中键入：您可能是指categorySelect


另外，“select”在这里并不适合作为一个名称，最好只称它为类别
。同样适用于困难选择

将多个值指定给一个特性：
const categorgySelect={
类别:"体育",，
类别:"艺术",，
// ...
类别：“历史”
};

这将覆盖任何以前定义的值，这意味着对象将只保留该属性的最后一个值（此处：Category:'History'
）
要保存值数组，请使用：

注意不同的括号[]
，因为我们现在使用数组文字创建数组，而不是使用对象文字创建对象
const categorgySelect=[
"体育",，
“艺术”，
// ...
“历史”
];

这同样适用于困难选择

现在，在DOMContentLoaded
侦听器中，我们想用
s填充
s。这可以很容易地使用一个。

注意：A for…循环对象的可枚举属性，而A循环对象的可枚举属性（MDN详细介绍了该属性）。对于数组，它们可能看起来很相似，但却完全不同。一般来说，一个人需要一个for…of循环，但总是试着想想你想要什么