下拉列表框处理操作主要使用的是一个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. 关于Reapter多重嵌套的详细补充

    <asp:Repeater ID ="rptfour" runat ="server" OnItemDataBound="two_Bind&qu ...

  2. Qt OpenCV Support Image Type 支持读写的图像格式

    Qt 支持的图片格式如下: Format Description Qt's support BMP Windows Bitmap Read/write GIF Graphic Interchange ...

  3. JavaScript正则验证邮箱

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

  4. Js组件的一些写法【转】

    首先看下Prototype里的写法: var Class = { create: function() { return function() { this.init.apply(this, argu ...

  5. FZU 2195 思维

    很无聊的背景故事...求最短的时间原来就是省去了检查员最后上山的时间...还让不让人回家了... 感觉这是个最短路 思想是求出来dis 然后求里面最大的那条边 用总长减去最长边 就是答案 写了一个小时 ...

  6. hdoj-1233-还是畅通工程

    题目:hdoj-1233 题解: 本题是典型的最小生成树问题,给出的是无向图,这里使用的方法是Prim最小生成树算法. Reference Prim算法参照:最小生成树-Prim算法和Kruskal算 ...

  7. tomcat启动报错：IOException while loading persisted sessions: java.io.EOFException.

    tomcat启动错误代码: 严重: IOException while loading persisted sessions: java.io.EOFException java.io.EOFExce ...

  8. ubuntu lnmp

    apt-get update apt-get upgrade apt-get install libxml2 libxml2-dev apt-get install make apt-get inst ...

  9. Deep_learning

    https://en.wikipedia.org/wiki/Deep_learning

  10. mysql 存储过程 php版本

    <?php /** * PHP操作Mysql存储过程示例 * * @author flyer0126 * @date 2011-12-23 * */ //配置数据库连接信息 $hostname ...