这个案例对经常写前端程序的人来讲应该比较简单，不过像我这种习惯于后台开发，对前端不熟悉的人来说，还是有参考意义的。

在asp.net里面，经常需要响应下拉列表DropDownList的SelectedIndexChanged事件。这个在后台来做，比较简单，只需要设置控件的AutoPostBack 属性为true，然后编写相应的后台事件处理代码即可。

但是，这样的实现方式有时候不太合适。因为，每当修改下拉列表的选项都会触发服务器的响应操作。这个在某些情况下是必要的，但在某些情况下却显得多余。比如：用户只是希望修改选项然后再界面上看到不同的显示，这样的情况仍然采用服务器的事件处理程序来处理就显得有些浪费资源。所以，我们可以考虑采用HTML控件再加上runat=“server”属性，保证服务器能读取该控件的值还可以用js读取控件的值。不说了，看案例吧。

下面的案例希望在修改下拉列表的值时把当前选择的项目的值显示在页面上。

 <html>

 <head>

 <title>test</title>

 <script type="text/javascript">

         function changeTitle() {

             document.getElementById("divTitle").innerHTML = document.getElementById("cars").value;

         }

     </script>

 </head>

 <body>

 <form>

 <div id="divTitle" style="border:solid 1px red; width:200px;height:50px;"></div>

 <select id="cars" name="cars" onchange="changeTitle();">

     <option value="Volvo">Volvo</option>

     <option value="saab">Saab</option>

     <option value="fiat" selected="selected">Fiat</option>

     <option value="audi">Audi</option>

 </select>

 </form>

 </body>

 </html>

js响应HTML客户端下拉列表的修改事件的更多相关文章

  1. 转：Spine.JS+Rails重客户端Web应用技术选型思路：『风车』架构设计

    原文来自于:http://www.infoq.com/cn/articles/fengche-co-architecture 风车这个项目开始于 2011 年 11 月份,之前叫做 Pragmatic ...

  2. easyUI下拉列表点击事件的使用

    可以通过input 和select来创建下拉列表 其中select的创建如下: 通过json来创建js数组 [{ "id":1, "text":"te ...

  3. js/java 获取、添加、修改、删除cookie（最全）

      一.cookie介绍 1.cookie的本来面目 HTTP协议本身是无状态的.什么是无状态呢,即服务器无法判断用户身份.Cookie实际上是一小段的文本信息(key-value格式).客户端向服务 ...

  4. 2dx关于js响应layer触摸消息的bug

    cocos2dx关于js响应layer触摸消息的bug cocos2d-x 3.7 问题描述: 目前这个版本中(3.7),c++层的layer触摸消息只能通过消息的方式发送给js,不能像lua一样直接 ...

  5. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  6. JS如何利用定时器实现长按事件

    本篇文章由:http://xinpure.com/js-how-to-use-timer-press-event/ JS 原生事件并没有长按事件,但是我们可以利用一些原有的事件,来实现长按事件 任务需 ...

  7. 信号处理是Unix和LInux系统为了响应某些状况而产生的事件

    信号处理是Unix和LInux系统为了响应某些状况而产生的事件,通常内核产生信号,进程收到信号后采取相应的动作. 例如当我们想强制结束一个程序的时候,我们通常会给它发送一个信号,然后该进程会捕捉到信号 ...

  8. 深入解析vue.js响应式原理与实现

    vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...

  9. Node.js 使用http客户端向网站请求数据并保存

    app.js代码: // 内置http模块,提供了http服务器和客户端功能 var http=require("http"); // 内置文件处理模块 var fs=requir ...

随机推荐

  1. Android 利用SurfaceView进行图形绘制

    SurfaceView使用介绍 SurfaceView是View的一个特殊子类,它的目的是另外提供一个线程进行绘制操作. 要使用SurfaceView进行绘制,步骤如下: 1.用SurfaceView ...

  2. Python实现各种排序算法的代码示例总结

    Python实现各种排序算法的代码示例总结 作者:Donald Knuth 字体:[增加 减小] 类型:转载 时间:2015-12-11我要评论 这篇文章主要介绍了Python实现各种排序算法的代码示 ...

  3. mysql查询结果导出到文件

    方法一: 直接执行命令: mysql> select count(1) from table   into outfile '/tmp/test.xls'; Query OK, 31 rows ...

  4. jquery获取(设置)节点的属性与属性值

    1. attr(属性名)        //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2 ...

  5. 51nod 1027大数乘法

    题目链接:51nod 1027大数乘法 直接模板了. #include<cstdio> #include<cstring> using namespace std; ; ; ; ...

  6. 两个TextView控件居中显示

    通过一个线性布局将两个TextView控件包装在一起,设置LinearLayout的layout_centerInParent属性为true即可.代码如下 <LinearLayout andro ...

  7. Gridview布局界面练习Simple Adapter

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZcAAAJcCAIAAAC6w36wAAAgAElEQVR4nOy953YbS5KuvVsiTFWlz6

  8. css布局之一列布局

    在我们浏览网页中经常看见一列布局其实一列布局就是 一般的一列布局的都是固定宽度的 body{margin:0;padding:0} .main{width:800px;height:300px;bac ...

  9. 《TCP/IP详解卷1：协议》第2章 链路层-读书笔记

    章节回顾: <TCP/IP详解卷1:协议>第1章 概述-读书笔记 <TCP/IP详解卷1:协议>第2章 链路层-读书笔记 <TCP/IP详解卷1:协议>第3章 IP ...

  10. WCF 发布使用

    WCF发布,由于使用的是 net.tcp协议因此 需要在发布的WCF站点的管理网站-高级设置,连接协议中添加net.tcp的绑定 然后还需要在网站绑定编辑中添加net.tcp的绑定.否则访问的时候会出 ...