jquery学习之1.10-小练习-选中下拉框内容并显示

浏览数：22 / 时间：2015年06月09日

选中下拉框中的内容，并且获取内容，显示出来，代码如下：

 1 <%@ page language="java" import="java.util.*"
 2  pageEncoding="utf-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5   <head>
 6   <title>11</title>    
 7   <script type="text/javascript" src="js/jquery-1.11.0.js">
 8   </script>
 9   <script language="javascript">
10    $(document).ready(function()
11   {
12       
13       
14       //****改变input的type=text的内容，改写为test哈哈*******
15      $("#bt1").click(
16      function()
17      {    
18       $("input[type=‘text‘]:enabled").val("test哈哈");     
19      }
20      );
21       //*************弹出选中checkbox的个数*************** 
22     
23       $("#bt2").click(
24      function()
25      {     
26       alert($("input:checked").length());
27      }
28      );
29     //*************利用text()获取选中的select下拉框*************** 
30     
31       $("#bt3").click(
32      function()
33      {
34      
35        // alert($("select option:selected").text());
36        //实现方式2 把每个选中的checkbox都打印，用val()
37        var $objs=$("select option:selected");
38        $.each($objs,function(i,n){
39        
40        alert($(this).val());
41        //或者 alert(n.value);
42        });
43        }
44      );
45    });
46   
47   //****************************************************** 
48   </script>
49   </head> 
50   <body>
51     <input type="button"  id="bt1" value="改变input的type=text的内容，改写为我是西瓜" ></input>
52     <input type="button"  id="bt2" value="弹出选中checkbox的个数" ></input>
53     <input type="button"  id="bt3" value="利用text()获取选中的select下拉框" ></input>
54     
55     <input type="text" disabled="disabled"  id="t1" value="text1" ></input>
56     <input type="text"  class="t2" value="text2" ></input>
57     <input type="checkbox">选择1</input>
58     <input type="checkbox">选择2</input>
59     <input type="checkbox">选择3</input>
60     <select>
61      <option value="1">Flowers</option>
62      <option value="2">Gardens</option>
63      <option value="3">Trees</option>
64     </select>
65     <select multiple="multiple">
66      <option value="1">Flowerssss</option>
67      <option value="2">Gardensssss</option>
68      <option value="3">Treesssss</option>
69         <br/><br/><br/>
70     <div id="div1" title="第一个div" style="background:grey;border:1px solid;width:20%;height:30%;float:left">div1</div> 
71     <div class="div2" title="test" style="background:white;border:1px solid;width:20%;height:30%;float:left"><p>p1第一段</p>p2第二段<p></p></div>
72    
73   </body>
74 </html>