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

一个select框:

1<select multiple="" name="attachlist" size="5" style="HEIGHT: 134px; WIDTH: 228px" tabindex="4">
2<option value="nOT"></option>
3</select>

效果:
有一个按钮,一个文本框,
往文本框中输入一些内容,按下按钮,其中的内容就添加到select框中了,可反复操作
请指教!!!
---------------------------------------------------------------

1<select multiple="" name="attachlist" size="5" style="HEIGHT: 134px; WIDTH: 228px" tabindex="4">
2<option value="nOT"></option>
3</select>
1<input onclick="attachlist.options[attachlist.options.length]=new Option('a','a')" type="button" value="add"/>

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

 1<script>   
 2// 添加选项   
 3function addOption(pos){   
 4var objSelect = document.myForm.mySelect;   
 5// 取得字段值   
 6var strName = document.myForm.myOptionName.value;   
 7var strValue = document.myForm.myOptionValue.value;   
 8// 建立Option对象   
 9var objOption = new Option(strName,strValue);   
10if (pos == -1 & pos > objSelect.options.length)   
11objSelect.options[objSelect.options.length] = objOption;   
12else   
13objSelect.add(objOption, pos);   
14}   
15// 删除选项   
16function deleteOption(type){   
17var objSelect = document.myForm.mySelect;   
18if(objSelect.options.length>0){   
19if (type == true)   
20objSelect.options[objSelect.selectedIndex] = null;   
21else   
22objSelect.remove(objSelect.selectedIndex);   
23}   
24else   
25alert("已经没有选项可以删除了!")   
26}   
27// 显示选项信息   
28function showOption(objForm){   
29var objSelect = objForm.mySelect;   
30if(objSelect.options.length>0){   
31document.all.myOptionName.value = objSelect.options[objSelect.selectedIndex].text;   
32document.all.myOptionValue.value = objSelect.options[objSelect.selectedIndex].value;   
33}   
34else   
35alert("没有选项可以显示!")   
36}   
37</script>
 1<form name="myForm">
 2<select name="mySelect">
 3<option selected="" value="value1">HTML</option>
 4<option value="value2">JavaScript</option>
 5<option value="value3">VBScript</option>
 6</select>
 7<input onclick="showOption(this.form)" type="button" value="显示"/>
 8<input onclick="deleteOption(true)" type="button" value="删除"/>
 9<input onclick="deleteOption(false)" type="button" value="Remove方法"/><br/><br/>   
10选项名称 : <input name="myOptionName" type="text" value="CSS"/><br/>   
11选项的值 : <input name="myOptionValue" type="text" value="value4"/>
12<input onclick="addOption(-1)" type="button" value="添加"/>
13<input onclick="addOption(0)" type="button" value="插入"/>
14</form>

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

1<select id="sel" multiple="" name="attachlist" size="5" style="HEIGHT: 134px; WIDTH: 228px" tabindex="4">
2<option value="nOT">delopt</option>
3</select>
1<input onclick="delsel()" type="button"/>
1<script>   
2function delsel()   
3{   
4var index;   
5index=document.all('sel').selectedIndex;   
6document.all('sel').remove(index);   
7}   
8</script>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus