Javascript 如何动态操作select选项

我想添加一个选项，通过点击按钮，通过JavaScript动态选择。我想确定，如果它已经有n个选项，那么它只在n+1个选项处添加

<select name="select">
 <option value="value1">Value 1</option> 
 <option value="value2" selected>Value 2</option>
 <option value="value3">Value 3</option>
</select>
<button onclick =addvalue()>clickme</button>enter code here
function addvalue()
 {
  var e=document.getElementById('select');
  var i =0;
  var abc = true;
  while(abc)
  {
   if (e.options[i].innerText==null)
   {
    abc =false;
   }
   i++;
 }
 alert(i);
}

值1
价值2
价值3
单击此处输入代码
函数addvalue（）
{
var e=document.getElementById（'select'）；
var i=0；
var abc=真；
while（abc）
{
if（e.options[i].innerText==null）
{
abc=假；
}
i++；
}
警报（一）；
}

---

但这会引发一个错误，即e.options[i].innerText为null或不是对象。稍后，我将用添加选项的代码替换警报

您使用的是document.getElementById（'select'）；，但指定了select的名称。将“name”改为“id”，你应该会很好，尽管我建议使用比“select”更具描述性的方法：

e、 g。

---

从

到

如果您使用的是getElementByID API，则需要获取id。
向select添加一个“id”属性，就可以得到元素

使用浏览器的开发者工具（chrome-f12）调试代码。
如果添加调试器；声明它将自动停止

e、 选项[i]。innerText为null或不是对象

因为当
i>=options.length
时，没有
选项[i]
。检查它是否存在：

function addvalue()
 {
  var e=document.getElementById('select');
  var i =0;
  var abc = true;
  while(abc)
  {
   if (!e.options[i] || e.options[i].innerText==null)
   {
    abc =false;
   }
   i++;
  }
  alert(i);
}


它将提醒4，我不确定您想要的是什么<在
abc
设置为
false
后，code>i

增加一次

我想你可能根本不需要那个while循环

function addvalue()
 {
  var e=document.getElementById('select'), i = e.options.length;
  alert(i);
}

---

这将提醒

3

，因为这是您选择的选项数。

我知道这是一个错误，但即使更正也会抛出相同的错误