下拉框与文本框之间的转换

Posted 奋斗的少年WH

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了下拉框与文本框之间的转换相关的知识，希望对你有一定的参考价值。

<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>

 

以上是关于下拉框与文本框之间的转换的主要内容，如果未能解决你的问题，请参考以下文章

java swing 下拉框与文本框

Html文本框与文字之间的距离？

下拉列表框与线性帧布局管理器

select2 下拉框与 jQuery 日期选择器不兼容？

引导表单组将文本框与按钮分开

如何将组合框与文本框连接起来？