页面设计原由：

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

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

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

那么如何写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. MySQL多实例安装

    1.安装MySQL需要的依赖的包和编译软件   (1)安装MySQL需要的依赖包 安装MySQL之前,最好先安装MySQL需要的依赖包,不然后面会出现报错,还得回来安装MySQL的依赖包. [root ...

  2. html小技巧

    占位符 插入一个非间断空格.一般来说,无论你按多少次空格键,HTML也只会在单词之间显示一个空白间隔.当你需要插入多个空格时,请输入 或 代码.它们名为"空格占位符",你输入几个, ...

  3. index+match函数在压实度中对盒号盒质量随机不重复的最佳使用

    首先按照升序排列好盒号和盒质量,使其一一对应, 盒号    盒重量    随机值rand()     随机值大小排列rank 1         2001       0.01             ...

  4. MYSQL基础操作

    MYSQL基础操作 [TOC] 1.基本定义 1.1.关系型数据库系统 关系型数据库系统是建立在关系模型上的数据库系统 什么是关系模型呢? 1.数据结构可以规定,同类数据结构一致,就是一个二维的表格 ...

  5. Spring 01基础

    一.Spring作用:管理项目中各种业务Bean(service类.Dao类.Action类),实例化类,属性赋值 二.Spring IOC(Inversion of Control )控制反转,也被 ...

  6. [bzoj3932][CQOI2015][任务查询系统] （主席树）

    Description 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的 任务用三元组(Si,Ei,Pi)描述,(Si,Ei,Pi)表示任务从第Si ...

  7. python3条件控制if

    Python条件语句是通过一条或多条语句的执行结果(为真或假)来决定执行哪部分代码. if语句 if语句的一般形式如下: if 条件1: 语句1 elif 条件2: 语句2 else: 语句3 其意思 ...

  8. IE10 IE11 中 网站无法登录问题cookie

    方法一: 在程序文件中添加此文件 在项目中创建一个文件夹将下载的文件直接拖入文件夹中 来源于:http://www.hanselman.com/blog/BugAndFixASPNETFailsToD ...

  9. VUE---Missing space before function parentheses

    解决方法:

  10. Java递归目录结构

    import java.io.File; public class FileTree { public static void main(String[] args) { printFileTree( ...