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

在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. idea首次提交项目

    http://www.cnblogs.com/exmyth/p/6133289.html

  2. spring-mvc.xml中的配置

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  3. CSS布局：两列，左边宽度自适应，右边宽度固定200px

    <div id="box1"> <div id="left1"></div> <div id="right1 ...

  4. VUE应用的一些感受

    方便,数据绑定太方便了. 一个组件一个.vue文件特别清晰. 讲真vue比angular好学多了. webpack打包最近看懂,通过一个主文件把require的文件都打进来.业务代码放build里,引 ...

  5. SSM框架学习之高并发秒杀业务--笔记2-- DAO层

    上节中利用Maven创建了项目,并导入了所有的依赖,这节来进行DAO层的设计与开发 第一步,创建数据库和表. 首先分析业务,这个SSM匡济整合案例是做一个商品的秒杀系统,要存储的有:1.待秒杀的商品的 ...

  6. WCF初探-14：WCF服务协定

    前言: 在前面的文章中,我们定义的服务协定上都会有一个ServiceContract的特性来修饰,这是因为服务契约的实现要靠ServiceContractAttribute 属性定义,然后使用一个或多 ...

  7. python and django

    [安装(CentOS 6.5)] 安装python, 采用yum install python,安装后为2.6版本 安装django 1.6.4,再高的版本,就需要python提升版本.下载并解压,然 ...

  8. MySQL 入门知识点

    参考网址:http://www.cnblogs.com/mr-wid/archive/2013/05/09/3068229.html 1.数值类数据列类型 数据列类型 存储空间 描述 TINYINT ...

  9. PR和VV的分类与区别

    Adobe Premiere是一款常用的视频编辑软件,由Adobe公司推出.现在常用的有CS4.CS5.CS6.CC.CC 2014及CC 2015版本.是一款编辑画面质量比较好的软件,有较好的兼容性 ...

  10. enmo_day_01

    OCP : 三门,sql, 管理一,管理二 VUE 考试中心 OCM : 2天,5年经验 11g grid 12c cloud 个人技术博客 itpub, csdn, 51blog 自己买主机,域名, ...