<html> <head> <meta charset="utf-8"> <title>下拉框与文本框之间的转换</title> <script language="JavaScript"> function demo(){ var sel=document.all["sel"]; var tx=document.all["txt"]; //alert(sel.value=="other"); if(sel.value=="other"){ document.all["sel"].style.display="none"; //设置样式为不显示 tx.type="text"; //设置属性为文本格式 （之前的是hidden属性） } } function demo2(){ var sel=document.all["sel"]; var tx=document.all["txt"]; if(tx.value.trim()==""){ sel.style.display="block"; tx.type="hidden"; } } </script> </head> <body> <form> <fieldset style="500px;margin-left:32%;margin-top:10%;"> <legend >下拉框与文本框之间的转换</legend> <table border="1" cellpadding="5px" cellspacing="0" align="center" style="margin-top:10%;margin-bottom:10%;" width="300px" height="150px"> <tr> <td align="center">用户类别：</td> <td align="center"> <!--<div id="sel2">--> <select id="sel" onchange="demo()"> <option value="student">学生</option> <option value="soldiers">军官</option> <option value="citizens">公民</option> <option value="other">其他</option> </select> <!--</div>--> <input type="hidden" name="txt" id="txt" value="123456" size="10" onblur="demo2()"/> <!--<input type="txt" name="txt2" id="txt2" value="qqqqqq" size="10"/>--> </td> </tr> </table> </fieldset> </form> </body> </html>
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>下拉框与文本框之间的转换</title> 5 <script language="JavaScript"> 6 function demo(){ 7 var sel=document.all["sel"]; 8 var tx=document.all["txt"]; 9 //alert(sel.value=="other"); 10 if(sel.value=="other"){ 11 document.all["sel"].style.display="none"; //设置样式为不显示 12 tx.type="text"; //设置属性为文本格式 （之前的是hidden属性） 13 } 14 } 15 16 function demo2(){ 17 var sel=document.all["sel"]; 18 var tx=document.all["txt"]; 19 if(tx.value.trim()==""){ 20 sel.style.display="block"; 21 tx.type="hidden"; 22 } 23 } 24 </script> 25 </head> 26 27 <body> 28 <form> 29 30 <fieldset style="500px;margin-left:32%;margin-top:10%;"> 31 <legend >下拉框与文本框之间的转换</legend> 32 <table border="1" cellpadding="5px" cellspacing="0" align="center" style="margin-top:10%;margin-bottom:10%;" width="300px" height="150px"> 33 <tr> 34 <td align="center">用户类别：</td> 35 <td align="center"> 36 <!--<div id="sel2">--> 37 <select id="sel" onchange="demo()"> 38 <option value="student">学生</option> 39 <option value="soldiers">军官</option> 40 <option value="citizens">公民</option> 41 <option value="other">其他</option> 42 </select> 43 <!--</div>--> 44 <input type="hidden" name="txt" id="txt" value="123456" size="10" onblur="demo2()"/> 45 <!--<input type="txt" name="txt2" id="txt2" value="qqqqqq" size="10"/>--> 46 </td> 47 </tr> 48 </table> 49 </fieldset> 50 51 </form> 52 </body> 53 </html>