返回目录
  • 更多资源请访问>>>BK设计资讯站(Www.Blue1000.Com)Www.Blue1000.Com
  • 主要解答:wangyime
  • 感谢:net_lover、wangxj0600、wangyime
  • 审核者:fason
  • 如何动态地向一个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  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>

    返回目录