页面设计原由：

因为很多客户不知道如何来到我们公司，领导想让我在微信公众号上面做一个链接，客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点。

实现起来并不难，但由于公司有很多办事处，所以需要设计一个选单，在用户选择相应办事处后自动加载相关的地图，于是我做了以下页面：

（小弟不才，如代码有冗余或您有更好的写法还请各位指正，谢谢！底部有贴出原代码！）

那么如何写Select中的触发事件呢？

有以下几种方法：

方法一，纯JS代码：

<select id="addr" onchange="sele_Change()">

    <option id="1" value="地址1">地点1</a>

    <option id="2" value="地址2">地点2</a>

</select>

<script type="text/javascript">

       function sele_Change(){

        var objS = document.getElementById("addr");

        var get_map = objS.options[objS.selectedIndex].value;

        alert(get_map);

        //需要执行的事件（加载地图html）

       }

</script>

方法二，使用jQuery代码：(这个是网上找的实例，原理是一样的，这个是先获取option的val值，然后在#thediv中显示该值，思路是一致的，稍微改一下代码即可做成加载地图的效果）

<script type="text/javascript" src="jQuery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function () {

  $("#sel").bind("change",function(){

    if($(this).val()==0){

      return;

    }

    else{

      $("#thediv").text($(this).val());

    }

  });

});

</script>

</head>

<body>

<div id="thediv"></div>

<select id="sel">

  <option value="0">-请选择-</option>

  <option value="1">选项一</option>

  <option value="2">选项二</option>

  <option value="3">选项三</option>

  <option value="4">选项四</option>

</select>

　　

以下为我编写的源代码，请在移动端预览效果。（供参考，转载请注明原文链接）：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<title>宝力机械办事处导航</title>

<script type="text/javascript" src="js/jquery.js"></script>

</head>

<!--编写：Colin,最后更新2016-07-01-->

<style type="text/css">

select{width:50%;margin-bottom:5px;padding:3px;}

#design{position:absolute;top:15px;right:10px;color:#999;}

#address,#design{font-size:12px;}

</style>

<script type="text/javascript">

var office_map;

var map_url;

var office_addr;

$(document).ready(function() {

$('#office').change(function(){

//获取值

office_addr=$('#office').find('option:selected').attr('addr');

map_url=$('#office').find('option:selected').attr('url');

//进行映射

$("iframe").attr("src",map_url);

$("#address span").text(office_addr);

});

});

</script>

<body>

    <div class="header">

      <select id="office">

<option value="dgo" addr="广东省东莞市长安镇霄边社区振安东路63-1号" url="http://l.map.qq.com/12164012371?m">宝力东莞办事处</option>

<option value="hko" addr="香港葵涌兴芳路223号新都会广场二座3808室" url="http://l.map.qq.com/12166308588?m">宝力香港总公司</option>

<option value="gzo" addr="广州市天河区体育东路140-148号南方证券大厦1601室" url="http://l.map.qq.com/12164344460?m">宝力广州办事处</option>

<option value="szo" addr="深圳市福田区滨河大道5022号联合广场A座20楼2006室" url="http://l.map.qq.com/12164018364?m">宝力深圳办事处</option>

<option value="suzo" addr="江苏省苏州市工业园区唯亭镇娄东路2号,3号楼(一、二楼)" url="http://l.map.qq.com/12166320604?m">宝力苏州办事处</option>

<option value="bjo" addr="北京市东城区建国门内大街18号恒基中心第2座9楼909室" url="http://l.map.qq.com/12164348846?m">宝力北京办事处</option>

<option value="cqo" addr="重庆市南岸区匯龙路55号40幢附46号" url="http://l.map.qq.com/12166309604?m">宝力重庆办事处</option>

<option value="sho" addr="上海市浦东陆家嘴南泉北路1029号中电大厦16楼1605室" url="http://l.map.qq.com/12166310546?m">宝力上海办事处</option>

<option value="syo" addr="沈阳市皇姑区北陵大街20号甲鸿阳大厦815号房间" url="http://l.map.qq.com/12166314340?m">宝力沈阳办事处</option>

<option value="sxo" addr="中国陕西省西安市高新区科技五路3号橡树星座A座2708室" url="http://l.map.qq.com/12166318959?m">宝力西安办事处</option>

<option value="zjo" addr="浙江省温州市鹿城区黎明东路上陡门冶金新村18栋203号" url="http://l.map.qq.com/12166324025?m">宝力温州办事处</option>

<option value="sdo" addr="山东省青岛市四方区郑州路1号雁山世纪商务中心302B室" url="http://l.map.qq.com/12166338893?m">宝力青岛办事处</option>

<option value="nbo" addr="宁波市中山东路181号中农信大厦29楼A16" url="http://l.map.qq.com/12166343815?m">宝力宁波办事处</option>

<option value="tjo" addr="天津河东区新开路与华兴道交口渤海创智大厦12B09室" url="http://l.map.qq.com/12166345137?m">宝力天津办事处</option>

<option value="hbo" addr="湖北省武汉市武昌区中南路街武珞路442号中南国际城B1-1509室" url="http://l.map.qq.com/12166346674?m">宝力武汉办事处</option>

<option value="njo" addr="南京市江甯区秣陵街道双龙大道1118号新都匯广场2-1518" url="http://l.map.qq.com/12166348319?m">宝力南京办事处</option>

<option value="amo" addr="澳门殷皇子大马路43-53A澳门广场9楼N座" url="http://l.map.qq.com/12166341531?m">宝力澳门办事处</option>

      </select><span id="design">Design By:Colin</span>

        <span id="address"><br />地址:<span>广东省东莞市长安镇霄边社区振安东路63-1号</span></span>

    </div>

<div>

<iframe width="100%" height="100%" scrolling="no" frameborder="no" src="http://l.map.qq.com/12164012371?m"></iframe>

</div>

</body>

</html>

以上代码主要记录JQuery事件代码，调用地图部分为旧内容，个人使用的页面实际URL已更新为API的地图标注方式。（推荐！）

示例效果：

http://dwz.cn/3JXOwk

腾讯地图API使用说明：

http://lbs.qq.com/tool/component-marker.html

http://lbs.qq.com/webservice_v1/guide-search.html

By:Colin

HTML Select 标签选择后触发jQuery事件代码实例的更多相关文章

  1. 关于ASP.net TextBox控件的失去焦点后触发其它事件

    编写人:CC阿爸 2015-2-02 今天在这里,我想与大家一起分享如何处理的ASP.net TextBox控件的失去焦点后触发其它事件的问题,在此做个小结,以供参考.有兴趣的同学,可以一同探讨与学习 ...

  2. 6. 添加messager.alert()确定按钮的回调函数，即点完确定按钮后触发的事件

    添加messager.alert()确定按钮的回调函数,即点完确定按钮后触发的事件: $.messager.alert('提示信息', "请联系管理员处理!", 'info', f ...

  3. input标签内容改变触发的事件

    原生方法 onchange事件 <input type="text" onchange="onc(this)"> function onc(data ...

  4. select标签刷新后保持之前选择值

    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <selec ...

  5. 苹果手机微信浏览器select标签选择完成之后页面不会自动回到原位

    说明: html默认select选择框控件在IOS的浏览器中 是底部弹出下拉选择. 这样到时页面位置错位,选择结束后对应不少元素的点击事件不响应. 这样看起来问题不大,但是选择完成之后点击确定提交弹出 ...

  6. select控件自动触发change事件

    这里接上面的二级联动.背景:当页面跳转到修改页面时,需要首先绑定学院和专业.这就需要在页面加载时触发select的change事件,具体用trigger函数进行实现.代码如下. $("#xs ...

  7. 根据select中选定option触发不同事件

    做公司项目,要实现一个小需求,根据下拉框选定的数据,绑定不同的事件.我的思路是获取select下面的option值,然后给它们定义不同的点击事件,但是在使用中option不能添加类,同时没有click ...

  8. jQuery-iframe加载完成后触发的事件监听

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 最近遇到一个问题,要写一个后台管理系统的layout,里面content是一个ifra ...

  9. 禁止select标签选择，禁止select组件change值

    大家知道, 对于HTML控件select, 是没有readOnly属性的,所以设置它并不起作用,如: 如果用disabled的话,提交时又取不到值. 那有什么方法可以实现?可以有一个折中的方法,如下: ...

随机推荐

  1. error LNK2001: 无法解析的外部符号

    1.错误描述 error LNK2001: 无法解析的外部符号 "__declspec(dllimport) void __cdecl PadSystem::Private::printQS ...

  2. 【C++】类和对象（构造与析构）

    类 类是一种抽象和封装机制,描述一组具有相同属性和行为的对象,是代码复用的基本单位. 类成员的访问权限 面向对象关键特性之一就是隐藏数据,采用机制就是设置类成员的访问控制权限.类成员有3种访问权限: ...

  3. java日志组件介绍（common-logging，log4j，slf4j，logback ）

    转自:http://www.blogjava.net/daiyongzhi/archive/2014/04/13/412364.html common-logging是apache提供的一个通用的日志 ...

  4. POJ 2255. Tree Recovery

    Tree Recovery Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11939   Accepted: 7493 De ...

  5. hdu2848 Visible Trees (容斥原理)

    题意: 给n*m个点(1 ≤ m, n ≤ 1e5),左下角的点为(1,1),右上角的点(n,m),一个人站在(0,0)看这些点.在一条直线上,只能看到最前面的一个点,后面的被档住看不到,求这个人能看 ...

  6. 一枚招聘信息——分期乐招页面重构/UI开发（8k-12k 深圳 经验1-3年 学历不限 全职）

    腾讯人创建的分期乐公司,急需页面重构人才若干枚,公司前景好,机会难得,有兴趣的速速 8k-12k 深圳 经验1-3年 学历不限 全职 公司网站: http://www.fenqile.com/ 职位诱 ...

  7. Statement对象的executeUpdate返回信息

    int num = sta.executeUpdate(String sql);返回的是我们平时操作数据库客户端时控制台显示的影响行数

  8. MVC+EF6+Oracle，提示ORA-01918: user '***' does not exist

    1.在上下文里重载OnModelCreating:        //没用到这个方法         protected override void OnModelCreating(DbModelBu ...

  9. docker学习(7) docker-compose使用示例

    上一回学习了如何利用docker搭建一个mysql + java service + nginx,总共4个docker容器,如果采用docker run的方式一个一个容器去创建十分麻烦.为了能更高效的 ...

  10. java日志学习笔记

    一．日志家族 Log4j一开始就很强大,在jdk自带日志系统之前,apache就曾经尝试把log4j划为java的一部分,不知为何没能成功,sun还是用了自己很弱的日志系统.为了兼容各个日志系统,ap ...