javascript - 如何动态操作选择选项

Question

我想添加选项以通过单击按钮通过 JavaScript 动态选择。我想确定它是否已经存在一个选项，然后它只添加到 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);
}

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

Answer 1

e.options[i].innerText is null or not an object

因为当 i >= options.length 时没有 options[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);
}

http://jsfiddle.net/eMQzC/

它会提醒 4，我不确定这是你想要得到的。 i在abc设置为false后增加一次。

我认为您可能根本不需要那个 while 循环。

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

这将提醒 3，因为它是您选择的选项数。