<select> <option>1</option> <option>3</option> </select> <button>增加选项2</button> <script> btn.onclick = function(){ var newOption = document.createElement('option'); newOption.innerHTML = 2; test.insertBefore(newOption,test.options[1]); } </script>
【2】可以使用选择框的add()方法，add(newoption,reloption)方法向控件中插入新<option>元素，其位置在相关项(reloption)之前
使用Option构造函数来创建新选项，接受两个参数：文本(text)和值(value)，第二个参数可选
<select> <option>1</option> <option>3</option> </select> <button>增加选项2</button> <script> btn.onclick = function(){ var newOption = new Option('2'); test.add(newOption,1); } </script>
移除选项
与添加选项类似，移除选项的方式也有很多种
【1】使用DOM的removeChild()方法
<select> <option>1</option> <option>2</option> <option>3</option> </select> <button>移除选项2</button> <script> btn.onclick = function(){ test.removeChild(test.options[1]); } </script>
【2】使用选择框的remove()方法。这个方法接受一个参数，即要移除选项的索引
[注意]使用该方法的好处是，若不存在被移除选项的索引，不会报错，只是静默失败
<select> <option>1</option> <option>2</option> <option>3</option> </select> <button>移除选项2</button> <script> btn.onclick = function(){ test.remove(1); } </script>
【3】将相应选项设置为null
[注意]该方法同样不会报错
<select> <option>1</option> <option>2</option> <option>3</option> </select> <button>移除选项2</button> <script> btn.onclick = function(){ test.options[1] = null; } </script>