zoukankan      html  css  js  c++  java
  • JavaScript:下拉列表框的事件处理

      下拉列表框处理操作主要使用的是一个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>

    效果图如下:

    默认状态:         

    随意选择一个城市时:

    选择成功后的结果:

  • 相关阅读:
    瀑布流
    轮播图
    封装动画的函数
    回到顶部带动画
    动画setInterval
    模拟滚动条
    放大镜
    刷新
    cookie
    拖拽
  • 原文地址:https://www.cnblogs.com/XYQ-208910/p/5833953.html
Copyright © 2011-2022 走看看