|
use "input" |
|
1 text
您可以通过多次选择下拉菜单中的项目将它们统统添加到TEXT域中,然后通过action中指定的程序处理。 <html> <head> <script language="JavaScript"> function put() { option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedIndex].text txt=document.forms[0].number.value txt=txt + option document.forms[0].number.value=txt } </script> </head> <body> <form name="myform" method="post" action="...."> 您经常使用: <select name="dropdown"> <option value="Javascripts">Javascripts</option> <option value="Java">Java</option> <option value="ASP">ASP</option> <option value="Dhtml">Dhtml</option> <option value="PHP">PHP</option> <option value="Perl">Perl</option> </select> <input type="button" onClick="put()" value="点击这里多重选择" name="button"> <input type="text" name="number"> <input type="submit" name="Submit" value="Submit"> </form> </body> </html> 说明:本例通过表单索引forms[0]确定是哪个Form中的元素和值。0表示该页面中的第一个Form,如果在表单前面还有其它的Form,那么只要修改索引值即可。例如:document.forms[1]等。或者干脆使用form的名字,例如:document.myform等。其中myform是表单的name。 2 下拉菜单选项处理 <script language="JavaScript"> function put() { option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedIndex].text txt=option document.forms[0].favorite.value=txt } </script> <form name="myform" method="post" action="...."> <select name="dropdown" onChange="put()"> <option>您最喜欢的浏览器是</option> <option value="ie">Internet Explorer </option> <option value="netscape">Netscape Navigator </option> </select> <input type="text" name="favorite"> <input type="submit" value="submit"> </div> </form> 3 Checkbox的选择控制技巧 <html> <head> <script language="JavaScript"> function check() { myselect=document.forms[0].s1 answer=document.forms[0].answer txt="" for (i = 0; i<myselect.length; ++ i) { if (myselect[i].checked) { txt=txt + myselect[i].value + " " //空一个格 } } answer.value=txt } </script> </head> <body> <form> 请选择如下的商品:<br> <input type="checkbox" name="s1" value="咖啡" onclick="check()">咖啡<br> <input type="checkbox" name="s1" value="白糖" onclick="check()">白糖<br> <input type="checkbox" name="s1" value="葡萄酒" onclick="check()">葡萄酒<br> <input type="text" name="answer"> <input type="submit" name="submit" value="Order"> </form> </body> </html> 注意:每个checkbox选择项目的name值是一样的(本例是s1),这与通常的checkbox不同。 不使用索引直接使用form名字的情况(不同之处用红色表示): <html> <head> <script language="JavaScript"> function check() { myselect=document.myform.s1 answer=document.myform.answer txt="" for (i = 0; i<myselect.length; ++ i) { if (myselect[i].checked) { txt=txt + myselect[i].value + " " } } answer.value=txt } </script> </head> <body> <form name="myform" method="post" action="......"> 请选择如下的商品:<br> <input type="checkbox" name="s1" value="咖啡" onClick="check()"> 咖啡<br> <input type="checkbox" name="s1" value="白糖" onClick="check()"> 白糖<br> <input type="checkbox" name="s1" value="葡萄酒" onClick="check()"> 葡萄酒<br> <input type="text" name="answer"> <input type="submit" name="submit" value="Order"> </form> </body> </html> 4 Radio控制技巧 <html> <head> <script language="JavaScript"> function check() { browser=document.forms[0].browser answer=document.forms[0].answer for (i = 0; i<browser.length; ++ i) { if (browser[i].checked) { answer.value=browser[i].value } } } </script> </head> <body> <form> 你喜欢什么浏览器?<br> <input type="radio" name="browser" onclick="check()" value="Explorer">Microsoft Internet Explorer<br> <input type="radio" name="browser" onclick="check()" value="Netscape">Netscape Navigator<br> <input type="text" name="answer"> </form> </body> </html> |