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

在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. MFC编程入门之八（对话框：创建对话框类和添加控件变量）

    创建好对话框资源后要做的就是生成对话框类了.生成对话框类主要包括新建对话框类.添加控件变量和控件的消息处理函数. 例程Addition是基于对话框的程序,所以程序自动创建了对话框模板IDD_ADDIT ...

  2. Android 自定义波浪动画 --"让进度浪起来~"

    原文链接:http://www.jianshu.com/p/0e25a10cb9f5 一款效果不错的动画,实现也挺简单的,推荐阅读学习~ -- 由 傻小孩b 分享 waveview <Andro ...

  3. json对象，数组，字符串总结

    关于json对象,数组,字符串的总结 什么是json? JSON(JavaScript Object Notation)  一种轻量级的数据交换格式,JSON采用完全独立于语言的文本格式...(来自百 ...

  4. 软件测试--测试Demo

    视频地址(第二课时):https://pan.baidu.com/s/1gfLVC2n 软件安装好了! 软件默认的浏览器是火狐. 如果需要IE,chrome,都在前一篇的安装包里有. 测试结果 视频里 ...

  5. Docker中的镜像分层技术详解

    早在集装箱没有出现的时候,码头上还有许多搬运的工人在搬运货物,在集装箱出现以后,码头上看到更多的不是工人,而且集装箱的搬运模式更加单一,更加高效,还有其他的好处,比如:货物多打包在集装箱里面,可以防止 ...

  6. Head First 设计模式 --6 命令模式

    命令模式:将"请求"封装成对象,以便使用不同的请求,队列或者日志来参数化其他对象.命令模式也支持可撤销的操作.用到的原则:1.封装变化2.组合优于继承3.针对接口编程,不能针对实现 ...

  7. C/C++ 如何来自动优雅的涮别银家的贴子

    被涮屏涮烦了,就分享一下如何用低调的c/c++来涮别人家的屏吧! 此处埋下三颗雷! 这不是啥新知识,也不是什么浅显的代码.下面,来淘淘这份经验,呼呼 我们要了解Web browser 这个控件,因为到 ...

  8. Rotate Image [LeetCode]

    You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...

  9. BFC 神奇背后的原理

    BFC已经是一个耳听熟闻的词语了,网上有许多关于BFC的文章,介绍了如何触发BFC, 以及BFC的一些用处(如清浮动,防止margin重叠等).虽然我知道如何利用BFC解决这些问题,但当别人问我BFC ...

  10. 基于TF-IDF值的汉语语义消歧算法

    RT,学校课题需要233,没了 话说,窝直接做个链接的集合好了,方便以后查找 特征值提取之 -- TF-IDF值的简单介绍 汉语语义消歧之 -- 句子相似度 汉语语义消歧之 -- 词义消歧简介 c++ ...