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

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


一个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  οnclick="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"  οnclick="showOption(this.form)"  value="显示">  
<input  type="button"  οnclick="deleteOption(true)"  value="删除">  
<input  type="button"  οnclick="deleteOption(false)"  value="Remove方法"><br><br>  
选项名称  :  <input  type="text"  name="myOptionName"  value="CSS"><br>  
选项的值  :  <input  type="text"  name="myOptionValue"  value="value4">  
<input  type="button"  οnclick="addOption(-1)"  value="添加">  
<input  type="button"  οnclick="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  οnclick=delsel()>  
<script>  
function  delsel()  
{  
   var  index;  
   index=document.all('sel').selectedIndex;  
   document.all('sel').remove(index);  
   }  
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值