下拉列表框处理操作主要使用的是一个onchange的事件，此事件描述的是内容改变后行为。

范例：观察下拉列表框的事件处理

代码：

<!doctype html>

 <html lang = "zh-CN">

 <head>

     <meta charset="utf-8">

     <meta name="description" content="this is a checkbox example">

     <meta name="keywords" content="checkbox,html,js">

     <title>下拉框的测试</title>

     <script type="text/javascript">

         window.onload = function () {

             document.getElementById('city').addEventListener('change',function(){

                 alert("当前选项是:"+this.value);

             },false);

         }

     </script>

 </head>

 <body>

     <form action="">

         请选择城市:

         <select id = "city">

             <option value="BJ - 北京">北京</option>

             <option value="SH - 上海">上海</option>

             <option value="NJ - 南京">南京</option>

             <option value="TJ - 天津">天津</option>

             <option value="HF - 合肥">合肥</option>

             <option value="WH - 武汉">武汉</option>

         </select>

     </form>

 </body>

 </html>

效果图如下：

默认状态：  　　　　　　

随意选择一个城市时：

选择成功后的结果：

JavaScript：下拉列表框的事件处理的更多相关文章

  1. 【repost】JavaScript 事件模型 事件处理机制

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  2. [转]理解JavaScript中的事件处理

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  3. 理解JavaScript中的事件处理

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  4. 理解JavaScript中的事件处理 阻止冒泡event.stopPropagation();

    原文地址:http://www.cnblogs.com/binyong/articles/1750263.html 这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时 ...

  5. JavaScript 事件模型 事件处理机制

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  6. 详解JavaScript中的事件处理

    在漫长的演变史,我们已经告别了内嵌式的事件处理方式(直接将事件处理器放在HTML元素之内来使用),今天的事件,它已是DOM的重要组成部分,遗憾的是,IE继续保留它最早在IE4.0中实现的事件模型,以后 ...

  7. JavaScript权威设计--事件处理介绍(简要学习笔记十七)

    1.事件相关概念 事件类型:一个用来说明发生什么类型事件的字符串 事件目标:是发生的事件或与之相关的对象. 事件处理程序(事件监听程序):是处理货响应事件的函数. 事件对象:是与特定事件相关并且包含有 ...

  8. javascript事件和事件处理

    于js期间事件处理被分成三个步骤: 1.发生事件 2.启动事件处理程序 3.事件处理程序做出反应 事件处理程序的调用 1.在javascript中 在javascript中调用事件处理程序,首先要获得 ...

  9. JavaScript权威指南--事件处理

    知识要点 客户端JavaScript程序采用了异步事件驱动变成模型(13.3.2节).这种风格并不只应用于web编程,所有使用图形用户界面的应用程序都采用它,它们静待某些事件发生,然后响应. 事件就是 ...

随机推荐

  1. FreeBSD Intel SYSRET Kernel Privilege Escalation Exploit

    /* * FreeBSD 9.0 Intel SYSRET Kernel Privilege Escalation exploit * Author by CurcolHekerLink * * Th ...

  2. JQuery asp.net 简单入门

    1.A标签 <a href="javascript:setURL('Invelogin.aspx');">Login.aspx</a> <a href ...

  3. php 魔鬼训练

    环境配置 找到自己的[系统命令行]目录:bin /usr/bin #mac系统 /bin #ubuntu系统 再找到Php的编译器,这个根据你的安装路径来判断,mac默认的路径如下 cd /usr/b ...

  4. C# - 事物回滚

    该功能依赖dbhelp.cs 传送门:http://www.cnblogs.com/CyLee/p/5324652.html 起始点,不能放在try语句中 this.DbHelp.BeginTrans ...

  5. IOS第六天(3:scrollView 图片轮播器)

    IOS第六天(3:scrollView 图片轮播器) #import "HMViewController.h" #define kImageCount 5 @interface H ...

  6. JavaScript正则验证邮箱

    正则表达式/^正则$/.test() <html> <head> <title>JavaScript</title> <meta charset= ...

  7. etcd学习记录

    参考资料: etcd:从应用场景到实现原理的全方位解读 etcd:用于服务发现的键值存储系统 Etcd学习(一)安装和.NET客户端测试 Etcd学习(二)集群搭建Clustering

  8. WEB项目web.xml文件中classpath: 跟classpath*:使用的区别

    引用一篇很不错的文章:http://blog.csdn.net/wxwzy738/article/details/16983935 首先 classpath是指 WEB-INF文件夹下的classes ...

  9. multipart/form-data请求与文件上传

    要上传文件,需要用post方法,并且设置enctype为multipart/form-data. <form action="/upload" method="po ...

  10. Nvidia VertexTextureFetch Water

    http://http.download.nvidia.com/developer/SDK/Individual_Samples/samples.html http://http.download.n ...