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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<script type="text/javascript" src="http://a.tbcdn.cn/tbra/1.0/tbra-aio.js"></script>

<script type="text/javascript" src="http://www.taobao.com/home/js/sys/districtselector.js"></script>

<p>

	<label>地区：</label>

	<form method="get">

	<select name="province" id="J_redstar_province"></select>

	<select name="city" id="J_redstar_city"></select>

	<select name="area" id="J_redstar_area"></select>

	<br/>

	<input type="submit"><span>点击提交后传递的是地区对应的code码</span>

	<form>

</p>

<script type="text/javascript">

(function(){

	var Y = YAHOO.util;

	var provSel = Y.Dom.get('J_redstar_province');

   	var citySel = Y.Dom.get('J_redstar_city');

        var distSel = Y.Dom.get('J_redstar_area');

	var cv = TB.form.DistrictSelector.attach('J_redstar_province', 'J_redstar_city', 'J_redstar_area');

})();

//根据code码获取具体地区的代码

alert(TB.form.DistrictSelector._tb_ds_data[310101][0]);

</script>

</body>

</html>

正在做的一个系统需要一个前端的地区组件，刚好发现淘宝网上有，凭着开源共享的精神，就从页面上摘下来了~

网上也有这个组件比较老的版本，但是关于根据code获取对应地区的代码比较麻烦，所以改写了下

ps.本代码摘自淘宝网，分享仅供学习交流使用

摘自淘宝的js地区组件的更多相关文章

  1. 新浪网易淘宝等IP地区信息查询开放API接口调用方法

    通过IP地址获取对应的地区信息通常有两种方法:1)自己写程序,解析IP对应的地区信息,需要数据库.2)根据第三方提供的API查询获取地区信息. 第一种方法,参见文本<通过纯真IP数据库获取IP地 ...

  2. 手机淘宝用JS来动态写meta标签（1像素边框处理方法）

    var metaEl = doc.createElement('meta'); var scale = isRetina ? 0.5:1; metaEl.setAttribute('name', 'v ...

  3. 淘宝flexible.js的使用

    首先大家最关注的怎么使用,原理不原理是后面的事 比如设计稿量来的宽度是100px 那么我们布局的时候,就这么写{width:1.3333rem},1.3333rem是由100/75算出来的,以此类推2 ...

  4. 淘宝地址爬取及UI展示

    淘宝地址爬取及UI展示 淘宝国家省市区街道获取 参考 foxiswho 的 taobao-area-php 部分代码,改由c#重构. 引用如下: Autofac MediatR Swagger Han ...

  5. jQuery实现淘宝购物车小组件

    我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章将实现淘宝购物车小组件, 用原生js可以实现吗,当然可以,可是就是任性一回,就是想用jQuery 来实现下.HTML代码不多才4行,CSS ...

  6. 模仿淘宝首页写的高仿页面，脚本全用的原生JS，菜鸟一枚高手看了勿喷哈

    自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : ...

  7. 使用淘宝镜像cnpm安装Vue.js

    简介: Vue.js是前端一个比较火的MVVM框架, 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑 ...

  8. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

  9. OAuth2 通用组件源码下载(支持新浪微博、QQ、淘宝)(转载)

    转载地址:http://www.cyqdata.com/download/article-detail-54302 OAuth2 社区通用组件说明:   源码为C#(.NET)写成,目前支持新浪微博. ...

随机推荐

  1. ios开发——实用技术OC篇&地图与定位

    地图与定位 11.1 iOS定位服务 11.2 iOS地图 11.3 Web地图 1 iOS定位服务 iOS中有三个定位服务组件: Wifi定位,通过查询一个Wifi路由器的地理位置的信息.比较省电, ...

  2. linux内核系统调用和标准C库函数的关系分析

    http://blog.csdn.net/skyflying2012/article/details/10044343

  3. Maven项目中如何添加日志

  4. Asp.Net 5使用第三方容器

    这几天在学习Asp.Net 5,现在文档以及博客之类的资料实在太少了,不看源码几乎举步维艰,好在全都是开源的,看看微软的代码也获益良多. 看到DependencyInjection的代码里除了默认的容 ...

  5. 基于ArcGIS的栅格图像平滑处理(转)

    基于ArcGIS的栅格图像平滑处理 栅格数据获取的途径多种多样,造成了栅格数据质量的很大差异,一些质量较差的栅格数据存在大量“噪音”象元,即在表达同类型的地理要素时,出现个别像元值与周边像元不一致的情 ...

  6. android开发之路05

    一.获取res资源文件下values中内容的方式: 1.string.xml文件-------------------------------> 取值方式:getResource().getSt ...

  7. 如何实现XA式、非XA式Spring分布式事务

    Spring应用的几种事务处理机制 Java Transaction API和XA协议是Spring常用的分布式事务机制,不过你可以选择选择其他的实现方式.理想的实现取决于你的应用程序使用何种资源,你 ...

  8. 关于C++需要加强学习的几点内容

    1.C++ effective指导原则 2.C++标准库 3.数据结构算法 4.C++设计模式 5.shell脚本 6.python

  9. 我的开发框架(WinForm)2

    上篇文章简单的介绍了一下,我的一个开发框架.看的人还不少,多谢大家的关注,我继续介绍一下,模块和模块之间是怎么组织起来的. Data模块: 该模块主要完成对数据的操作,采用仓储模式实现,在核心模块(C ...

  10. 基于ubuntu和windows连接

    对于ubuntu和centos安装软件是不一样的 对于ubuntu是  apt-get install  +软件名字 但是对于centos是 yum install +软件名字 所以ubunu远程连接 ...