下拉列表框处理操作主要使用的是一个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. 原生js记住密码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. openstack创建虚拟机的步骤

    图片来自互联网. 虚拟机启动过程如下: 1.界面或命令行通过RESTful API向keystone获取认证信息.2.keystone通过用户请求认证信息,并生成auth-token返回给对应的认证请 ...

  3. APP UI设计相关的一些链接

    安卓app设计规范整理和Android APP设计篇 http://www.25xt.com/appdesign/6536.html APP UI面试题:iOS和安卓的ui设计有什么区别 http:/ ...

  4. Leetcode | substr()

    求子串当然最经典的就是KMP算法了.brute force算法在leetcode上貌似也有一些技巧. brute force: char* StrStr(const char *str, const ...

  5. Gao Big 深圳行

    day 1 来到深圳的国际化大都市之后,首先要做的事情就是···坐地铁?? 到了旅店,已经比较晚了,又折腾了两三下.. day 2 第二天一早,一行人出发来到深圳大学(nv shen su she)参 ...

  6. cURL 学习笔记与总结（5）用 cURL 访问 HTTPS 资源

    <?php $curlobj = curl_init(); // 初始化 curl_setopt($curlobj, CURLOPT_URL, "https://ajax.aspnet ...

  7. UITableview cell 的多选

    利用NSMutableDictionary  key值 来改变cell的状态 -(void)createUI{ table = [[UITableView alloc]initWithFrame:CG ...

  8. [SHELL实例] （转）最牛B的 Linux Shell 命令 （一）

    本文编译自commandlinefu.com ( 应该是 Catonmat ) 的系列文章 Top Ten One-Liners from CommandLineFu Explained .作为一个由 ...

  9. Solr高亮详解

    hl.fl: 用空格或逗号隔开的字段列表.要启用某个字段的highlight功能,就得保证该字段在schema中是stored.如果该参数未被给出,那么就会高亮默认字段 standard handle ...

  10. C#创建Excel

    创建Workbook说白了就是创建一个Excel文件,当然在NPOI中更准确的表示是在内存中创建一个Workbook对象流. 本节作为第2章的开篇章节,将做较为详细的讲解,以帮助NPOI的学习者更好的 ...