select 可输入的下拉框

 1 <!DOCTYPE html>  
 2 <html>  
 3     <head>  
 4         <title></title>  
 5         <meta charset="UTF-8" />  
 6         <script type="text/javascript" src="js/jquery-1.8.0.js"></script>  
 7         <style>  
 8             * {  
 9                 margin: 0px auto;  
10                 padding: 0px auto;  
11             }  
12             body{  
13                 width: 200px;  
14                 height: 80px;  
15                 border: 1px solid;  
16             }  
17         </style>  
18     </head>  
19     <body>  
20         <div style="text-align: center;margin-top: 10px;">  
21             <select id="select" style="width:150px;height:21px;" onchange="a()">  
22                 <option value="1">爬楼高手</option>  
23                 <option value="2">隔壁老尤条</option>  
24             </select>  
25             <input id="_input" style="width:130px;height:15px;margin-left:-157px;"  type="text"  />  
26         </div>  
27         <input type="button" onclick="b()" style="margin-top: 10px;margin-left: 100px;" value="显示值" />  
28     </body>  
29     <script>  
30         function a() {  
31             $("#_input").val($("#select option:selected").text());  
32         }  
33         function b(){  
34             alert($("#_input").val());  
35         }  
36     </script>  
37   
38 </html>  

转载地址https://blog.csdn.net/qq_31083947/article/details/53575207

猜你喜欢

转载自www.cnblogs.com/1032473245jing/p/8991256.html