<!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. 信号之sigsuspend函数

    更改进程的信号屏蔽字可以阻塞所选择的信号,或解除对它们的阻塞.使用这种技术可以保护不希望由信号中断的代码临界区.如果希望对一个信号解除阻塞,然后pause等待以前被阻塞的信号发生,则又将如何呢?假定信 ...

  2. Google前工程经理王忻：如何准备软件工程师的面试

    http://t.jobdu.com/thread-368-1-1.html 导读:原文作者王忻,Google前工程经理,2003年月加入Google,是Google Lively背后的主导力量,是G ...

  3. Android_SystemService

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  4. 当 tcpdump -w 遇到 Permission denied

    为了定位问题,需要在Linux上使用tcpdump并且保存到文件,遇到了如下问题: tcpdump port 9001 -w xxtcpdump: xx: Permission denied 因为已经 ...

  5. Java虚拟机专题

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/5160083. ...

  6. [转]oracle odp.net 32位/64位版本的问题

    本文转自:http://www.cnblogs.com/yjmyzz/archive/2011/04/19/2020793.html 如果你的机器上安装了odp.net,且确信machine.conf ...

  7. PHP之ThinkPHP模板标签操作

    Action    : $User=M("user");     $list=$User->select();     $this->assign("list ...

  8. 基于ARM的RealView MDK开发环境

    RealView MDK可以对各种嵌入式处理器的软件开发工具.这么高端,着实很吸引我,ADS12还不知道怎么搞,居然还有这么高端的,但是还是得了解一下唉.洗这个自动配 置启动代码,集成Flash烧写模 ...

  9. Ubuntu 安装php_intl 扩展

    PHP Intl 类在I18n的网站中真的很方便,允许你依赖在终端用户区域,很容易的输出正确的日期格式. 在使用 yii2-app-ecom , 初始化之后,访问首页出现了: The default ...

  10. 模拟HTTP请求的一个工具

    在看洪大师的Symfony2的视频教程时,提到一个模拟HTTP请求的工具,HTTPie工具,比Curl好用哦