页面设计原由：

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

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

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

那么如何写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. SPI基础知识

    Serial Peripheral Interface 是摩托罗拉公司提出的一种总线协议,主要应用在EEPROM,FLASH,实时时钟,A/D转换,以及数字信号处理和数字信号解码器中 是一种高速,全双 ...

  2. monkey之monkey日志分析

    一.初步分析方法:Monkey测试出现错误后,一般的差错步骤为以下几步:1.找到是monkey里面的哪个地方出错2.查看Monkey里面出错前的一些事件动作,并手动执行该动作3.若以上步骤还不能找出, ...

  3. 2016 华南师大ACM校赛 SCNUCPC 非官方题解

    我要举报本次校赛出题人的消极出题!!! 官方题解请戳:http://3.scnuacm2015.sinaapp.com/?p=89(其实就是一堆代码没有题解) A. 树链剖分数据结构板题 题目大意:我 ...

  4. HDOJ 2561. 第二小整数 第k大问题

    第二小整数 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  5. BZOJ 1030: [JSOI2007]文本生成器 [AC自动机 DP]

    1030: [JSOI2007]文本生成器 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 3953  Solved: 1614[Submit][Stat ...

  6. AC日记——蓬莱山辉夜 codevs 2830

    2830 蓬莱山辉夜  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 在幻想乡中,蓬莱山辉夜是月球 ...

  7. Animator Controller 继承关系

    准备知识 对于Animator Controller中蜘蛛网一样的几十条连线,后续如果靠人工维护,那成本将是很大. AnimatorOverrideController组件的文档:https://do ...

  8. [LeetCode] Reconstruct Itinerary 重建行程单

    Given a list of airline tickets represented by pairs of departure and arrival airports [from, to], r ...

  9. 如何用Unity创建一个的简单的HoloLens 3D程序

    注:本文提到的代码示例下载地址>How to create a Hello World 3D holographic app with Unity 之前我们有讲过一次如何在HoloLens中创建 ...

  10. Binding笔记

    Binding基础  绑定某个对象的属性值到控制上,写法如下: public class Order : INotifyPropertyChanged//只要实现此接口 { public event ...