zoukankan      html  css  js  c++  java
  • 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;20%;height:30%;float:left">div1</div> 
    71     <div class="div2" title="test" style="background:white;border:1px solid;20%;height:30%;float:left"><p>p1第一段</p>p2第二段<p></p></div>
    72    
    73   </body>
    74 </html>
    my Code
  • 相关阅读:
    我认知的javascript之函数调用
    table 的宽度设置无效
    【转】微信读书排版引擎自动化测试方案
    RocksDB原理及应用
    ElasticSearch 架构及应用简介
    芝加哥大学论文写作指南 简述
    python 常用模块
    Flask-SQLAlchemy安装及设置
    selenium设置程序失败后重启
    获取临时IP加入临时列表使用
  • 原文地址:https://www.cnblogs.com/luckyflower/p/3623119.html
Copyright © 2011-2022 走看看