使用jQuery实现页面中监听   页面中某一个值（如input输入框）发生改变时触发。

<html>

    <head>

        <title>RunJS</title> 

    <!-- 引入自己的jQuery文件 -->

    <script type="text/javascript" src="http://qtcrmtest.staff.xdf.cn/js/lib/jquery/jquery-1.4.2.js"></script>  

    </head>

    <body>

        <h1 >   实时监测input中值的变化   </h1>

        <input type="text" id="username" >  

        <h1 >   实时监测下拉列表select中值的变化   </h1>

            <select id="htlx" name="htlx" style="width:200px;">

              <option value ="1">--无--</option>

              <option value ="qc">全程</option>

              <option value="dsq">单申请</option>

              <option value="dqz">单签证</option>

              <option value="dws">单文书</option>

              <option value="qt">其他</option>

            </select>    

        <div id="result"></div>

    </body>

</html>

<script type="text/javascript">

    //jquery

    $(function(){  

            //监听input

            $('#username').bind('input propertychange', function() {

                $('#result').html($(this).val().length);

            });  

            //监听select

            $('#htlx').bind('input propertychange', function() {

                $('#result').html($(this).val().length);

            }); 

      }

    )

</script>

jQuery实现页面监听（某一个值发生改变时触发）的更多相关文章

  1. jquery的change()：下拉框值改变时触发

    <script src="jquery.min.js" type="text/javascript"></script> <scr ...

  2. Js/jQuery实时监听input输入框值变化

    前言在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满 ...

  3. jQuery实时监听input的值变化（input的值产生变化才会触发事件）

    //用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) { return this.ea ...

  4. 关于vue事件监听的一个问题

    由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的.我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间 ...

  5. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  6. 浅谈postMessage多页面监听事件

    最近做了一个Echarts和Highcharts多图多页面连动的效果,就用到postMessage 如下介绍: 最开始在最外围的页面也就是所有页面的父级页面添加postMessage监听事件以便监听下 ...

  7. js监听文本框值变化事件，就oninput & onpropertychange & onkeyup & onchange的区别

    在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...

  8. js监听input输入框值的实时变化实例

    情景:监听input输入框值的实时变化实例 解决方法:1.在元素上同时绑定oninput和onporpertychanger事件 实例:<script type="text/JavaS ...

  9. jQuery的滚动监听

    jQuery的滚动监听 1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offs ...

随机推荐

  1. ASP.NET MVC TryUpdateModel 更新model

    总结参考:原文地址http://www.it165.net/pro/html/201305/5724.html TryUpdateModel (model)默认将view页面上form表单中的字段与m ...

  2. OC-NSArray

    一.认识数组 oc中可以把NSObject对象的子类放到数组这个集合中,但是int.float.double等基础数据类型需要先进行转换才可以存入数组. oc中数组以NS开头,其中分为可变数组和不可变 ...

  3. C++STL内存配置的设计思想与关键源码分析

    说明:我认为要读懂STL中allocator部分的源码,并汲取它的思想,至少以下几点知识你要了解:operator new和operator delete.handler函数以及一点模板知识.否则,下 ...

  4. PHP中MySQL、MySQLi和PDO的用法和区别【原创】

    对于一个初学PHP的自己,对数据库的连接有着很大的疑惑,从Java转到PHP.数据库连接变了,以前只知道JDBC连接数据库,或者直接用框架调用,对于的PHP的数据库连接方式,及其应用.不是很了解,于是 ...

  5. 使用jQuery操作DOM(2)

    1.获取设置属性值 attr({属性名1:属性值1,属性名2:属性值2}); //设置属性值 removeAttr(“属性名”); //删除属性 注意:如果元素没有此属性,会不起作用 2.获取同辈元素 ...

  6. 在初次安vs2008时设置的为C#现在怎么将其改为其他类型的界面

    如将C#改成C++, 工具 -> 导入和导出设置 -> 重置所有设置 -> 否,仅重置设置,从而覆盖我的当前设置 -> 重新选一个设置 -> 完成 选择完毕后,如新建MF ...

  7. 微信小程序的一些数据调用方式

    1.模板数据的调用 一张图了解一下在wxml页调用预先定义好的模板: 可以看到上面调用了两个模板,数据调用却是不同的,obj是一个对象,对象内包含多个键值对形式的数据: tabbar是一个一维数组,每 ...

  8. python常用模块之sys模块

    python常用模块之sys模块 1.sys.argv[]:命令行参数List,第一个元素是程序本身 # 写一个简单的python程序,代码如下: #!/usr/bin/python #coding= ...

  9. ExtJS小技巧

    一.从form中获取field的三个方法: 1.Ext.getCmp('id'); 2.FormPanel.getForm().findField('id/name'); 3.Ext.get('id/ ...

  10. .net core web 中使用app.UseRouter的几种使用方式

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory ...