<!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. 优麒麟（UbuntuKylin）不是国产Linux操作系统

    2014年5月10日,CCTV新闻频道"新闻直播间"栏目播报了"谁来替代Windows XP,工信部希望用户使用国产操作系统"报道.同一时候,央视也报道了眼下包 ...

  2. IPVS

    http://kb.linuxvirtualserver.org/wiki/IPVS_FULLNAT_and_SYNPROXY

  3. [001]const和指针

    很经典的: const int* p: int* const p: 前者表示指针指向的值是const,指向的值不可变,但是指针本身是可变的:后者表示改指针是const,指针不可变,但是指向的值是可变的 ...

  4. 《RESTful Web Services》第一章 使用统一接口

    序言 HTTP是一种应用层协议.SOAP和一些Ajax Web框架都将HTTP作为一种传输信息的协议,难以充分利用HTTP层的基础设施. 1.2 如何保持交互的可见性     可见性是HTTP的一个核 ...

  5. php开发环境配置 web UI模板

    web ui 能快速的整合进来?dwz? easyui?  bootstrap 在Apache 中配置: 在http.conf中加入php的设置 #php5_startphpIniDir " ...

  6. C#_delegate EndInvoke

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. 外网访问SVN

    1.路由端口映射: 进入路由器管理管理界面-->转发规则-->虚拟服务器 将端口3690(svn默认端口)和你的局域网IP(如192.168.1.104)映射,勾上“启动”,保存,OK了. ...

  8. Objective-C Runtime之着魔的UIAlertView

    前言: 上篇文章写的是Runtime的一个入门教程,刚哥问我那个Associated Objects加回调是啥时候用,那我就来告诉你啦!我们在使用UIAlertView的时候用的多. 传统的UIAle ...

  9. Markdown基础语法

    Markdown 的优点如下: 纯文本,所以兼容性极强,可以用所有文本编辑器打开. 让你专注于文字而不是排版. 格式转换方便,Markdown 的文本你可以轻松转换为 html.电子书等. Markd ...

  10. Android_Toast

    xml文件: main1: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...