jquery学习之1.10-小练习-选中下拉框内容并显示
选中下拉框中的内容，并且获取内容，显示出来，代码如下：
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>
