javascript - 未捕获的类型错误 : sel. 添加不是函数

Question

1. 带有选择标签的 HTML:

   <select id="sel"></select>`
   

2. 在 JavaScript 部分，我试图在选择下拉列表中添加选项，在循环中创建它们，将数组值分配给选项:

   var sel = document.getElementById('sel').value;
   var jsonobj = {School_charles: {class_A: [{ idkey: "1", name: "john" },
                 { idkey: "2", name: "jill" }]}};
   
   for(var i = 0; i <= jsonobj.School_charles.class_A.length; i++) {
       var option = document.createElement('option');
       option.text = jsonobj.School_charles.class_A[i].idkey;
       option.value = jsonobj.School_charles.class_A[i].name;
       sel.add(option);    
   }
   

请告诉我哪里错了，我正在学习 JavaScript。

Answer 1

你的代码有两个错误:

1. var sel = document.getElementById('sel').value;应该只是 var sel = document.getElementById('sel');所以变量sel引用实际的选择元素而不是选择值。这就是 add() 的原因方法未被识别。
2. 你的 for 循环条件应该只是 i < jsonobj.School_charles.class_A.length而不是 <=

var sel = document.getElementById('sel');
var jsonobj = {
  School_charles: {
    class_A: [{
      idkey: "1",
      name: "john"
    }, {
      idkey: "2",
      name: "jill"
    }]
  }
};

for (var i = 0; i < jsonobj.School_charles.class_A.length; i++) {
  var option = document.createElement('option');
  option.text = jsonobj.School_charles.class_A[i].idkey;
  option.value = jsonobj.School_charles.class_A[i].name;
  sel.add(option);
}

<select id="sel"></select>