极速小乌龟

导航

jQuery-下拉菜单 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>获取或设置元素的值</title>
 5     <script type="text/javascript" 
 6             src="Jscript/jquery-1.8.2.min.js">
 7     </script>
 8     <style type="text/css">
 9            body{font-size:12px;text-align:center}
10            div{padding:3px;margin:3px;width:120px;float:left}
11            .txt{border:#666 1px solid;padding:3px}
12     </style>
13     <script type="text/javascript">
14         $(function() {
15             $("select").change(function() { //设置下拉列表框change事件
16                 var strSel = $("select").val().join(","); //获取下拉列表框所选中全部选项值
17                 $("#p1").html(strSel); //显示下拉列表框所选中全部选项值
18             })
19             $("input").change(function() { //设置文本框focus事件
20                 var strTxt = $("input").val(); //获取文本框的值
21                 $("#p2").html(strTxt); //显示文本框所输入的值
22             })
23             $("input").focus(function() { //设置文本框focus事件
24                 $("input").val(""); //清空文本框的值
25             })
26         })
27     </script>
28 </head>
29 <body>
30      <div>
31          <select multiple="multiple" style="height:96px;width:85px">
32                  <option value="1">Item 1</option>
33                  <option value="2">Item 2</option>
34                  <option value="3">Item 3</option>
35                  <option value="4">Item 4</option>
36                  <option value="5">Item 5</option>
37                  <option value="6">Item 6</option>
38          </select>        
39      </div>
40      <div>
41          <input type="text" class="txt" id="p1"/>
42          <p id="p2"></p>
43      </div>
44 </body>
45 </html>

 

posted on 2017-03-21 21:42  极速小乌龟  阅读(143)  评论(0)    收藏  举报