<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="width: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="width: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>
时间： 2024-10-27 08:25:14