Javascript 表单 Select 添加　删除　子项目 操作

原址：http://www.mredkj.com/tutorials/tutorial005.html
HTML/JavaScript-Selectlist-Add/RemoveOptions(DOM)
select,options,insert,remove,appendlast,removelast
UsingatechniquethatworksinDOMcompliantbrowsers
Tutorial005-TryIt

Select

样式：（本页中操作不起作用，只为原型，其脚与html请看示例下一个）

InsertBeforeSelected
RemoveSelected

Append5
Append6
Append7
Append8
Append10
Append11
Append12
Append13
Append14
Append15

AppendLast
RemoveLast

TheJavaScript

<scriptlanguage="JavaScript"type="text/javascript">
<!--
varcount1=0;
varcount2=0;

functioninsertOptionBefore(num)
{
varelSel=document.getElementById('selectX');
if(elSel.selectedIndex>=0){
varelOptNew=document.createElement('option');
elOptNew.text='Insert'+num;
elOptNew.value='insert'+num;
varelOptOld=elSel.options[elSel.selectedIndex];
try{
elSel.add(elOptNew,elOptOld);//standardscompliant;doesn'tworkinIE
}
catch(ex){
elSel.add(elOptNew,elSel.selectedIndex);//IEonly
}
}
}

functionremoveOptionSelected()
{
varelSel=document.getElementById('selectX');
vari;
for(i=elSel.length-1;i>=0;i--){
if(elSel.options[i].selected){
elSel.remove(i);
}
}
}

functionappendOptionLast(num)
{
varelOptNew=document.createElement('option');
elOptNew.text='Append'+num;
elOptNew.value='append'+num;
varelSel=document.getElementById('selectX');

try{
elSel.add(elOptNew,null);//standardscompliant;doesn'tworkinIE
}
catch(ex){
elSel.add(elOptNew);//IEonly
}
}

functionremoveOptionLast()
{
varelSel=document.getElementById('selectX');
if(elSel.length>0)
{
elSel.remove(elSel.length-1);
}
}
//-->
</script>

TheHTML

<form>
<inputtype="button"value="o"onclick="insertOptionBefore(count1++);"/>
InsertBeforeSelected<br/>
<inputtype="button"value="o"onclick="removeOptionSelected();"/>
RemoveSelected<br/>
<selectid="selectX"size="10"multiple="multiple">
<optionvalue="original1"selected="selected">Orig1</option>
<optionvalue="original2">Orig2</option>
</select>
<br/>
<inputtype="button"value="o"onclick="appendOptionLast(count2++);"/>
AppendLast<br/>
<inputtype="button"value="o"onclick="removeOptionLast();"/>
RemoveLast
</form>