动态地向一个select框添加内容

来源:互联网 发布:nba2016季后赛数据统计 编辑:程序博客网 时间:2024/04/27 06:49

-----------------------------------------------------------------------------------------


一个select框:  
<select  name="attachlist"  size=5  multiple  tabindex="4"  style="HEIGHT:  134px;  WIDTH:  228px">  
       <option  value="nOT"></option>                    
</select>  
 
效果:  
有一个按钮,一个文本框,  
往文本框中输入一些内容,按下按钮,其中的内容就添加到select框中了,可反复操作  
请指教!!!  
---------------------------------------------------------------  
 
<select  name="attachlist"  size=5  multiple  tabindex="4"  style="HEIGHT:  134px;  WIDTH:  228px">  
       <option  value="nOT"></option>                    
</select>  
<input  onclick="attachlist.options[attachlist.options.length]=new  Option('a','a')"  value=add  type=button>  
---------------------------------------------------------------  
 
<script>  
//  添加选项  
function  addOption(pos){  
       var  objSelect  =  document.myForm.mySelect;  
       //  取得字段值  
       var  strName  =  document.myForm.myOptionName.value;  
       var  strValue  =  document.myForm.myOptionValue.value;  
       //  建立Option对象  
       var  objOption  =  new  Option(strName,strValue);  
       if  (pos  ==  -1  &  pos  >  objSelect.options.length)    
             objSelect.options[objSelect.options.length]  =  objOption;  
       else  
             objSelect.add(objOption,  pos);  
}  
//  删除选项  
function  deleteOption(type){  
           var  objSelect  =  document.myForm.mySelect;  
           if(objSelect.options.length>0){  
           if  (type  ==  true)  
                       objSelect.options[objSelect.selectedIndex]  =  null;  
           else  
           objSelect.remove(objSelect.selectedIndex);  
           }  
           else  
           alert("已经没有选项可以删除了!")  
}  
//  显示选项信息  
function  showOption(objForm){  
       var  objSelect  =  objForm.mySelect;  
           if(objSelect.options.length>0){  
                       document.all.myOptionName.value  =  objSelect.options[objSelect.selectedIndex].text;  
                       document.all.myOptionValue.value  =  objSelect.options[objSelect.selectedIndex].value;  
           }  
           else  
           alert("没有选项可以显示!")  
}  
</script>  
<form  name="myForm">  
<select  name="mySelect">  
<option  value="value1"  Selected>HTML</option>  
<option  value="value2">JavaScript</option>  
<option  value="value3">VBScript</option>  
</select>  
<input  type="button"  onclick="showOption(this.form)"  value="显示">  
<input  type="button"  onclick="deleteOption(true)"  value="删除">  
<input  type="button"  onclick="deleteOption(false)"  value="Remove方法"><br><br>  
选项名称  :  <input  type="text"  name="myOptionName"  value="CSS"><br>  
选项的值  :  <input  type="text"  name="myOptionValue"  value="value4">  
<input  type="button"  onclick="addOption(-1)"  value="添加">  
<input  type="button"  onclick="addOption(0)"  value="插入">  
</form>  
 
---------------------------------------------------------------  
 
<select  name="attachlist"  size=5  multiple  tabindex="4"  style="HEIGHT:  134px;  WIDTH:  228px"  id=sel>  
       <option  value="nOT">delopt</option>                    
</select>  
<input  type=button  onclick=delsel()>  
<script>  
function  delsel()  
{  
   var  index;  
   index=document.all('sel').selectedIndex;  
   document.all('sel').remove(index);  
   }  
</script>
原创粉丝点击