未捕获的TypeError：sel.add不是函数

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. 您的循环条件应该仅是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>

Answer 2

那里有两个错误

• [document.getElementById('sel').value应该是document.getElementById('sel')
• [i <= jsonobj.School_charles.class_A.length应该是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>