下拉列表框处理操作主要使用的是一个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. Angularjs - 路由 angular-ui-router

    注意,使用的路由不是官方的,而是第三方的.因为这个更加强大支持嵌套而且大家都是这样用的 http://www.tuicool.com/articles/zeiy6ff http://www.open- ...

  2. RestSharp用法小结

    今天有空,小结一下RestSharp的用法. RestSharp内置了XML和JSON的反序列化(deserializers ). application/json – JsonDeserialize ...

  3. POJ 2892 Tunnel Warfare（线段树单点更新区间合并）

    Tunnel Warfare Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 7876   Accepted: 3259 D ...

  4. Apache Spark源码走读之9 -- Spark源码编译

    欢迎转载,转载请注明出处,徽沪一郎. 概要 本来源码编译没有什么可说的,对于java项目来说,只要会点maven或ant的简单命令,依葫芦画瓢,一下子就ok了.但到了Spark上面,事情似乎不这么简单 ...

  5. vi 编辑器常用命令

    VI编辑器可以分为3种状态,它们分别是命令模式.输入模式以及末行模式,VI运行后默认进入命令模式. 命令模式:控制屏幕光标的移动,字符.单词或行的删除.替换,复制粘贴数据以及由此进入插入模式和末行模式 ...

  6. C#winform中TrackBar的使用

    1.手动设置高度(宽):把AutoSize属性设为false 2.重要的事件:Scroll事件和和ValueChanged事件 3.由于TrackBar的Value类型为int,若绑定数据项的最小精度 ...

  7. Happy

    1.delighted 2.over the moon                   Alex is over the moon with promotion. 3.really pleased ...

  8. 9.PHP内核探索：通过mod_php5支持PHP

    Apache对PHP的支持是通过Apache的模块mod_php5来支持的.如果希望Apache支持PHP的话,在./configure步 骤需要指定--with-apxs2=/usr/local/a ...

  9. vue model双向绑定

    view <div id='demo' class="container"> <input type="text" v-model='name ...

  10. SELECT 'www' = 0; 1

    http://dev.mysql.com/doc/refman/5.7/en/type-conversion.html MySQL 5.7 Reference Manual  /  Functions ...