<!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. python内存管理

    python对象三要素: identity(值):对应于内存的地址,不可修改 type(类型):不可修改 value(值): mutable :可以修改 immutable:不可以修改 引用计数 当引 ...

  2. Jordan Lecture Note-8: The Sequential Minimal Optimization Algorithm (SMO).

    The Sequential Minimal Optimization Algorithm (SMO) 本文主要介绍用于解决SVM对偶模型的算法,它于1998年由John Platt在论文“Seque ...

  3. 关于IE调试模式下才能显示效果

    要去除console.log() 低版本IE 没有开启调试模式  console.log()会导致报错

  4. AbStract 和Interface 方法是否能用Static修饰，为什么？

    Abstract 和Interface 方法是否能用Static修饰,为什么? interface中不能含有Static方法,属性,成员变量. Abstract中可以有Static方法,属性,成员变量 ...

  5. android之手工建立代码工程

    文件夹及文件架构: AndroidManifest.xml Android.mk res/layout/main.xml res/values/strings.xml src/com/liuzw/he ...

  6. Escape Sequences in String

     Code Output \' single quote \" double quote \\ backslash \n newline \r carriage return \t tab ...

  7. SpringMVC文件上传 Excle文件 Poi解析 验证 去重 并批量导入 MYSQL数据库

    SpringMVC文件上传 Excle文件 Poi解析并批量导入 MYSQL数据库  /** * 业务需求说明: * 1 批量导入成员 并且 自主创建账号 * 2 校验数据格式 且 重复导入提示 已被 ...

  8. 默认安装wamp修改MySQL密码

    首先,通过WAMP打开mysql控制台. 提示输入密码,因为现在是空,所以直接按回车. 然后输入“use mysql”,意思是使用mysql这个数据库,提示“Database changed”就行. ...

  9. Extjs load和reload的区别

    store load()和reload() load( Object options ) : Boolean 采用配置好的Reader格式去加载Record缓存,具体请求的任务由配置好的Proxy对象 ...

  10. ### CUDA

    CUDA Learning. #@author: gr #@date: 2014-04-06 #@email: forgerui@gmail.com 1. Introduction CPU和GPU的区 ...