注 : 该代码和 jQuery有冲突.. 需要使用jQuery的朋友慎用~~
<!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" />
<link href="css/submit.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/tbra-aio.js"></script>
<script type="text/javascript" src="js/districtselector.js"></script>
<style type="text/css" charset="utf-8">
#district select {
width: 88px;
}
</style>
<label for="district">所在地区</label>
<span id="district">
<select name="province" title="省" id="province">\</select>
<select name="city" title="市" id="city"></select>
<select name="area" title="区" id="area"></select>
</span>
<button onclick="goDistrict();">确定</button>
<script type="text/javascript">
var Y = YAHOO.util;
var provSel = Y.Dom.get('province');
var citySel = Y.Dom.get('city');
var distSel = Y.Dom.get('area');
var cv = TB.form.DistrictSelector.attach(provSel, citySel, distSel);
window['distSelector'] = cv;
function goDistrict(){
// 由于淘宝 js直接获取的 是 地区的代码.. 所以在这里必须通过这种方式获取真正的地区
var province = Y.Dom.get('province').options[Y.Dom.get('province').selectedIndex].text;
var city = Y.Dom.get('city').options[Y.Dom.get('city').selectedIndex].text;
var area = Y.Dom.get('area').options[Y.Dom.get('area').selectedIndex].text;
alert(province + city + area);
}
</script>
</body>
</html>
分享到：
相关推荐
本项目名为“仿京东淘宝地址选择js效果”，其目标是实现与京东和淘宝类似的地址选择功能，这在电子商务网站中至关重要，因为用户需要准确地输入或选择他们的收货地址。这种功能能够提升用户的购物体验，简化地址输入...
通过以上步骤，我们可以利用JavaScript实现一个高效、灵活的移动端省市区三级联动选择器。在实际项目中，还可以结合前端框架（如Vue、React等）或第三方库（如jQuery UI）来简化开发过程，提高代码的可维护性和可...
淘宝网的省市区三级联动功能是电商网站中常见的地理选择组件，主要用于用户填写收货地址时选择精确的地区信息。这个功能的实现涉及到前端界面、JavaScript交互以及后端数据库的支持。接下来，我们将深入探讨这个知识...
在IT行业中，"仿淘宝城市选择"通常是指创建一个与淘宝网站类似的城市选择功能模块。这个功能主要用于电子商务网站，让用户能够方便地选择收货地址或查看特定区域的商品配送信息。以下将详细介绍实现这一功能所需涉及...
标题中的“2018淘宝收货地址数据省市地区街道4级联动地址含数据库 js”表明这是一个关于2018年淘宝平台收货地址管理的数据集，其中包含了四级地址联动功能，即省级、市级、区县级和街道级的逐级选择。这样的数据通常...
【标题】"jquery仿淘宝配送商品地址弹出选择代码"涉及的是使用JavaScript库jQuery实现一个类似于淘宝网的商品配送地址选择功能。在电商网站中，这个功能对于用户来说至关重要，因为它允许用户方便快捷地输入或选择...
在IT行业中，尤其是在前端开发领域，我们经常遇到需要实现类似京东那样复杂的地区选择功能，即“三级联动”。这个“仿京东地区三级联动.zip”压缩包文件提供了一个基于jQuery的示例，帮助开发者快速构建这样的功能，...
这包括输入框（如姓名、电话、所在地区、详细地址等）、按钮（如保存、取消）、选择器（如省市区三级联动）。可以利用CSS3的Flexbox或Grid布局来实现响应式设计，确保在不同屏幕尺寸上都有良好的展示效果。 - **...
在JavaScript编程领域，"js获取全国各城市地区三级联动插件"是一种常见功能，用于创建类似于淘宝收货地址选择的交互体验。这个插件的主要目的是简化前端开发人员的工作，让他们无需从头开始编写代码，就能实现省份、...
《淘宝四级地址库详解——2018年3月最新数据》 在电子商务飞速发展的今天，精准的用户地址信息是商家提供高效服务的关键。淘宝作为国内最大的电商平台之一，其四级地址库为商家提供了详尽的收货地址信息，帮助商家...
1. **前端技术**：通常使用JavaScript或其库（如jQuery）来处理用户交互，Vue、React或Angular等现代前端框架可以用于构建组件化、状态管理的地址选择器。CSS用于样式设计，确保视觉效果与淘宝一致。 2. **后端技术...
这个“仿淘宝省市地区街道4级联动地址含数据库”项目，提供了一个类似的解决方案，包括了数据存储和前端展示的完整流程。 首先，我们要理解4级联动的工作原理。第一级通常是国家或省份，选择后，第二级会根据第一级...
这个过程不仅要求用户输入的信息全面，还应具备良好的用户体验，例如地区选择通常会采用下拉菜单的方式，逐级选择，避免用户手动输入错误。 在"CitySelect1"这个文件中，我们可以推测这是一个用于实现城市选择的...
【淘宝手机网站选择区域效果】是移动电商领域中一个重要的用户体验设计，主要涉及到地理定位、交互设计、前端技术等多个方面。在淘宝手机网站上，这个功能允许用户根据自己的实际所在地或者需要送达的区域来筛选商品...
【标题】"仿某宝手机网站选择省市县效果"是一个基于网页开发的插件，旨在实现与淘宝手机网站相似的地区选择功能。该插件设计的目的是为了方便用户在进行地址填写时，能够通过下拉菜单依次选择国家、省份、城市和县...
"jQuery 仿手机淘宝 省市区 三级联动"是一种常见的前端技术实现，它旨在提高用户在选择地址时的便捷性，模拟手机淘宝APP中的地区选择功能。这种功能通过JavaScript库jQuery来实现，提供一种流畅、高效的用户界面。 ...
前端通过JavaScript（JS）处理用户输入的地址信息，可以提供更好的用户体验并优化后台处理流程。智能识别技术在这里扮演了关键角色，它能帮助我们自动解析、验证和格式化地址数据。 1. **地址输入组件**： - 前端...
在Web开发中，四级联动是一种常见的交互设计，常用于实现地区选择功能，如省、市、区、街道等多级选择。"仿淘宝四级联动插件"是基于jQuery库实现的一种高效、易用的解决方案，旨在提供与淘宝网站相似的用户体验。...