有時(shí)候開發(fā)者需要對下拉菜單實(shí)行添加、替換或刪除選項(xiàng)等操作哺哼,尤其是與數(shù)據(jù)庫綁定的菜單佩抹。而這類操作我們可以通過DOM的一些構(gòu)造方法來實(shí)現(xiàn),下面是時(shí)候開始總結(jié)了取董。
添加下拉菜單的選項(xiàng)使用方法:
var oOption=new Option(text,value,defualtSelected,selected)
//后兩個(gè)值默認(rèn)為0棍苹,若不希望添加的選項(xiàng)被默認(rèn)選中則可忽略
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個(gè)選項(xiàng)
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;
}
添加選項(xiàng)到指定位置:用insertBefore()函數(shù)
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()函數(shù)在實(shí)際使用過程中不同的瀏覽器會(huì)有不同的表現(xiàn)效果,為了解決這個(gè)問題采用先將選項(xiàng)添加到菜單末尾再移動(dòng)的方法豆胸。使用如下:
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]);
}
刪除選項(xiàng)
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;
}
示例代碼看起來比較多配乱,但是仔細(xì)分析一下就是那幾個(gè)函數(shù)的應(yīng)用,以后會(huì)在應(yīng)用的過程中更進(jìn)一步理解皮迟。
每天吸收一點(diǎn)點(diǎn)搬泥!加油!