js实现下拉菜单添加、替换、删除选项

有时候开发者需要对下拉菜单实行添加、替换或删除选项等操作，尤其是与数据库绑定的菜单。而这类操作我们可以通过DOM的一些构造方法来实现，下面是时候开始总结了。
添加下拉菜单的选项使用方法：

var oOption=new Option(text,value,defualtSelected,selected)
//后两个值默认为0，若不希望添加的选项被默认选中则可忽略

function AddOption(selectNme){//selectNme表示<select>的name属性
var oForm=document.forms["formName"];//formName表示<form>的name属性
var oBox=oForm.element[selectNme];
var oOption=new Options(“篮球”，“basketball”)；
oBox.options[oBox.options.length]=oOption;
}

替换第i个选项

oBox.options[i]=oOption;

function ReplaceOption(selectNme,i){//selectNme表示<select>的name属性
var oForm=document.forms["formName"];//formName表示<form>的name属性
var oBox=oForm.element[selectNme];
var oOption=new Options(“篮球”，“basketball”)；
oBox.options[i]=oOption;
}

添加选项到指定位置:用insertBefore()函数

function AddOption(selectNme,i){//selectNme表示<select>的name属性
var oForm=document.forms["formName"];//formName表示<form>的name属性
var oBox=oForm.element[selectNme];
var oOption=new Options(“篮球”，“basketball”)；
oBox.insertBefore(oOption,oBox.options[i]);
}

由于insertBefore()函数在实际使用过程中不同的浏览器会有不同的表现效果，为了解决这个问题采用先将选项添加到菜单末尾再移动的方法。使用如下：

function AddOption(selectNme,i){//selectNme表示<select>的name属性
var oForm=document.forms["formName"];//formName表示<form>的name属性
var oBox=oForm.element[selectNme];
var oOption=new Options(“篮球”，“basketball”)；
//兼容IE7
oBox.options[oBox.options.length]=oOption;
oBox.insertBefore(oOption,oBox.options[i]);
}

删除选项

oBox.options[i]=null;

function AddOption(selectNme,i){//selectNme表示<select>的name属性
var oForm=document.forms["formName"];//formName表示<form>的name属性
var oBox=oForm.element[selectNme];
oBox.options[i]=null;
}

示例代码看起来比较多，但是仔细分析一下就是那几个函数的应用，以后会在应用的过程中更进一步理解。
每天吸收一点点！加油！