怎样使<select>中可以手工输入新的内容

 1<select>中不仅可以有预先定义的<option>，而且可以在<select>中手工输入新的其它内容。这样不仅可以把预先定义的<option>的内容提交，也可以提交手工新输入的内容。   
 2\---------------------------------------------------------------   
 3  
 4http://webfx.eae.net/dhtml/combobox/combo_demo.htm   
 5\---------------------------------------------------------------   
 6  
 7http://www.csdn.net/develop/Read_Article.asp?Id=15197   
 8\---------------------------------------------------------------   
 9  
10<html>
11<head>
12<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
13<title>可输入的select</title>
14<style>   
15.optionForSel {font-size:9pt}   
16</style>
17</head>
18<body leftmargin="50" topmargin="50">
19<table border="0" cellpadding="0" cellspacing="0" width="300">
20<tr>
21<td id="selectLength" style="height:20px;padding:0px;border:2px inset #404040;border-right:0px;border-bottom:1px solid #D4D0C8;font-size:9pt;" width="100%">
22<div id="selectedValue" style="padding:2px;border:0px;width:100%;height:20px;font-size:9pt;vertical-align:bottom"></div>
23</td>
24<td style="height:20px;padding:0px;border-top:2px inset #404040;border-left:0px;border-right:1px solid #D4D0C8;border-bottom:1px solid #D4D0C8;font-size:9pt" width="20">
25<img align="absmiddle" border="0" height="18" id="mm" onclick="mm_Click()" src="images/button2.gif" width="18"/>
26</td>
27</tr>
28</table>
29<div id="dropdownOption" style="position:absolute;visibility:hidden;width:100%;border:1px solid #080808;z-index:10">
30<table bgcolor="White" cellpadding="0" cellspacing="1" class="optionForSel" width="100%">
31<tr>
32<td onclick="document.all.selectedValue.innerText=this.innerText" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#0099ff'">   
33Visit1   
34</td>
35</tr>
36<tr>
37<td onclick="document.all.selectedValue.innerText=this.innerText" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#0099ff'">   
38Visit2   
39</td>
40</tr>
41<tr>
42<td onclick="document.all.selectedValue.innerText=this.innerText" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#0099ff'">   
43Visit3   
44</td>
45</tr>
46</table>
47</div>
48<script>   
49function mm_Click(){   
50if (document.all.dropdownOption.style.visibility == 'visible')   
51document.all.dropdownOption.style.visibility = 'hidden'   
52else   
53document.all.dropdownOption.style.visibility = 'visible'   
54}   
55  
56function init(){   
57document.all.dropdownOption.style.width = document.all.selectLength.clientWidth + 22;   
58document.all.selectedValue.contentEditable = true;   
59var strTop = 0;   
60var strLeft = 0;   
61var e1 = document.all.selectLength;   
62while(e1.tagName != "BODY"){   
63strTop += e1.offsetTop   
64strLeft += e1.offsetLeft   
65e1 = e1.offsetParent   
66}   
67document.all.dropdownOption.style.top = String(strTop + 24) + "px";   
68document.all.dropdownOption.style.left = String(strLeft) + "px";   
69}   
70  
71function clickE(){   
72if(window.event.srcElement.id !='mm')   
73document.all.dropdownOption.style.visibility = 'hidden';   
74}   
75  
76document.onclick = clickE   
77window.onload = init   
78</script>
79<br/>
80<br/>
81<input onclick="alert(document.all.selectedValue.innerText)" type="button" value="得到选中的值"/>
82</body>
83</html>   
84  
85作者：孟子E章</option></select></option></select>
怎样使&lt;select&gt;中可以手工输入新的内容

怎样使<select>中可以手工输入新的内容
