- 浏览: 299633 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
masuweng:
如何给新人机会 -
masuweng:
多sql结果集按列合并新结果报表实现方案 -
Ahe:
赞
坚持长跑方能赢 -
masuweng:
好好好
程序员如何更好的了解自己所做的事情 -
小楠人:
laoguan123 写道楼主好,使用过一些excel导入导出 ...
excell导入导出
方案一
方案二
<div class="l"> <p class="f_tiele">收货区域:</p> <div class="ovh"> <div class="area l"> <input type="text" id="inquiry_full_address" class="area_input" placeholder="请选择省市区" readonly="true" style="width: 347px;text-indent: 10px;"> <%= render 'shared/common/province_city_district', full_address_input_id: 'inquiry_full_address', province_input_id: 'inquiry_province', city_input_id: 'inquiry_city', district_input_id: 'inquiry_district' %> </div> </div> </div>
<div class="area_content" id="<%= full_address_input_id %>_input_content"> <div class="area_menu"> <ul> <li class="isClick">省份</li> <li>城市</li> <li>县区</li> </ul> </div> <div class="area_data_content"> <div class="area_data data_province isBlock"> <ul> </ul> </div> <div class="area_data data_city"> <ul> </ul> </div> <div class="area_data data_district"> <ul> </ul> </div> </div> </div> <%= text_field_tag 'address_data', '', type: 'hidden', data: {address: UnifiedAddress.get_data.as_json} %> <script> var address_data = $("#address_data").data().address; var _province = '' var _city = '' var _district = '' $(function(){ // 初始化数据 var province_html = ''; $.each(address_data, function(k, v){ province_html += '<li id="'+k+'"><a>'+k+'<input value="'+k+'" style="display:none"></a></li>'; }); $(".data_province ul").html(province_html); jQuery.fn.areaSelector = function(argument) { var thisId = $(this).attr("id"); var c_province; var c_city; var c_district; var c_province_input_id = '<%= province_input_id %>'; var c_city_input_id = '<%= city_input_id %>'; var c_district_input_id = '<%= district_input_id %>'; var c_area_content_id = thisId + '_input_content'; var full_address_input_id ='<%= full_address_input_id %>' _province = $('#' + c_province_input_id).val(); _city = $('#' + c_city_input_id).val(); _district = $('#' + c_district_input_id).val(); if(_province != ''){ $(".data_province #"+_province).addClass('active') } //input框点击事件 $(this).on('click', function(e) { e.stopPropagation(); $("#" + c_area_content_id).addClass('isBlock'); $(document).one("click",function(e){ $("#" + c_area_content_id).removeClass('isBlock'); }); }); $("#"+c_area_content_id).on('click', function(e){ e.stopPropagation(); }) //切换页签 $('#'+c_area_content_id+' .area_menu ul li').on('click', function(e) { e.stopPropagation(); $(this).addClass('isClick').siblings().removeClass('isClick'); var thisIndex = $(this).index() + 1; $('#'+c_area_content_id+' .area_data_content div:nth-child(' + thisIndex + ')').addClass('isBlock').siblings().removeClass('isBlock'); if(thisIndex == 1){ $("#"+_province).addClass('active') }else if(thisIndex == 2 ){ var city_html = ''; $.each(address_data[_province], function(k, v){ city_html += '<li id="'+k+'"><a>'+k+'<input value="'+k+'" style="display:none"></a></li>' }); $(".data_city ul").html(city_html); if(_city != ''){ $(".data_city #"+_city).addClass('active') } }else if(thisIndex == 3 ){ var district_html = ''; $.each(address_data[_province][_city], function(index, v){ district_html += '<li id="'+v+'" ><a>'+v+'<input value="'+v+'" style="display:none"></a></li>' }); $(".data_district ul").html(district_html); if(_district != ''){ $(".data_district #"+_district).addClass('active') } } }); /*选择操作响应*/ $('.data_province').on('click', 'li', function(e) { e.stopPropagation(); c_province = $(this).children('a').text(); var city_html = ''; $.each(address_data[c_province], function(k, v){ city_html += '<li id="'+k+'" ><a>'+k+'<input value="'+k+'" style="display:none"></a></li>' }); $(".data_city ul").html(city_html); $(this).addClass('active').siblings().removeClass('active'); _province = c_province _city = '' _district = '' $('#'+c_area_content_id+' .area_menu ul li:nth-child(2)').click(); $('#' + c_province_input_id).val(c_province); $('#' + c_city_input_id).val(''); $('#' + c_district_input_id).val(''); $('#' + thisId).val(c_province); if(window.addressChange && typeof window.addressChange == 'function'){ addressChange(); } }) $('.data_city').on('click', 'li', function(e) { e.stopPropagation(); c_city = $(this).children('a').text(); var district_html = ''; $.each(address_data[_province][c_city], function(index, v){ district_html += '<li id="'+v+'" ><a>'+v+'<input value="'+v+'" style="display:none"></a></li>' }); $(".data_district ul").html(district_html); $(this).addClass('active').siblings().removeClass('active'); _city = c_city _district = '' $('#'+c_area_content_id+' .area_menu ul li:nth-child(3)').click(); $('#' + c_city_input_id).val(c_city); $('#' + c_district_input_id).val(''); $('#' + thisId).val(_province + ' ' + _city); if(window.addressChange && typeof window.addressChange == 'function'){ addressChange(); } }) $('.data_district').on('click', 'li', function(e) { e.stopPropagation(); c_district = $(this).children('a').text(); $(this).addClass('active').siblings().removeClass('active'); $("#"+c_area_content_id).removeClass('isBlock'); $("#"+full_address_input_id).removeClass('error'); $('#' + c_district_input_id).val(c_district); _district = c_district $('#' + thisId).val(_province + ' ' + _city + ' ' + _district); if(window.addressChange && typeof window.addressChange == 'function'){ addressChange(); } }) $('body').on('click', '.area_data_content li', function(){ $('#'+thisId).change(); }) } // 调用省市级联 $('#<%= full_address_input_id %>').areaSelector(); }) </script>
方案二
<div class="field required" style="margin-bottom: 1px"><label>收货区域</label></div> <div class="six fields"> <%= i.input :province, label: false, as: :select, collection: {}, include_blank: '省份', input_html: {class: 'ui dropdown fluid'} %> <%= i.input :city, label: false, as: :select, collection: {}, include_blank: '城市', input_html: {class: 'ui dropdown fluid'} %> <%= i.input :district, label: false, as: :select, collection: {}, include_blank: '区域', input_html: {class: 'ui dropdown fluid'} %> </div>
var address_data = $("#address_data").data().address; var default_province = ''; var default_city = ''; var default_district = ''; // 省份城市级联初始化 //$("select[name$='[province]']").dropdown("set selected", default_province); //$("select[name$='[city]']").dropdown("set selected", default_city); //$("select[name$='[district]']").dropdown("set selected", default_district); // 多询盘方案 //$("#user_inquiries_attributes_"+index+"_province").dropdown("set selected", default_province); //$("#user_inquiries_attributes_"+index+"_city").dropdown("set selected", default_city); //$("#user_inquiries_attributes_"+index+"_district").dropdown("set selected", default_district); $(function(){ var province_html = "<option value=''>省份</option>"; $.each(address_data, function(k, v){ province_html += "<option value='"+k+"'>"+k+"</option>"; }); $("#user_inquiries_attributes_0_province").html(province_html) $("body").on('change', "select[name$='[province]']", function(){ var $city = $(this).parents(".fields").find("select[name$='[city]']"); var city_html = "<option value=''>城市</option>"; var city_item_html = '<div class="item" data-value="">城市</div>'; $.each(address_data[$(this).val()], function(k, v){ city_html += "<option value='"+k+"'>"+k+"</option>"; city_item_html += "<div class='item' data-value='"+k+"'>"+k+"</div>"; }); $city.html(city_html); $(this).parents(".fields").find(".user_inquiries_city .menu").html(city_item_html); }); $("body").on('change', "select[name$='[city]']", function(){ var $province = $(this).parents(".fields").find("select[name$='[province]']"); var $district = $(this).parents(".fields").find("select[name$='[district]']"); var district_html = "<option value=''>县区</option>" var district_item_html = '<div class="item" data-value="">县区</div>'; $.each(address_data[$province.val()][$(this).val()], function(k, v){ district_html += "<option value='"+v+"'>"+v+"</option>" district_item_html += "<div class='item' data-value='"+v+"'>"+v+"</div>"; }); $district.html(district_html); $(this).parents(".fields").find(".user_inquiries_district .menu").html(district_item_html); });
发表评论
-
基于html2canvas的长图分享
2018-12-21 10:11 1155<span class="ui label ... -
一些常用的ui框架组合
2018-10-09 17:52 1016amaze zUI 开源HTML5跨屏框架 window. ... -
连续点赞异步触发计数
2018-09-30 22:19 849防止连续触发异步请求,2秒发送一次计数 ... -
jQuery.fn.extend(object)合并相同单元列
2018-09-18 15:24 956jQuery中$.fn的用法示例介绍 https://www ... -
js解决搜索框传参数的一种方案
2017-10-26 11:20 469$(".button-to-export-sea ... -
基于semantic既可以下拉框也可以文本框输入
2017-07-10 10:07 997<div class="field & ... -
ajax提交json数据返回文件流下载excell
2017-06-02 14:45 1506ajax异步无法返回下载文件 可以通过添加from表单隐藏域的 ... -
rails全国订单发货热力图
2017-05-03 15:02 979路由配置 get '/monitor' => 'da ... -
ruby调用echart的柱状饼状图
2017-04-27 14:35 1095sql = "select GROUP_CON ... -
Rials实现下拉框联动的两种实现方式
2017-04-07 10:26 546一:partial模版替换 $(document). ... -
js动态生成的节点关联
2017-03-31 15:18 586有效方法: $(document).on('click' ... -
扫码枪发商品快递时录入发货快递单号到对应产品订单明细
2016-08-11 14:46 1392运用场景:扫码枪发商品快递时录入发货快递单号到对应产品订单明细 ... -
moment.js实现客户端显示本地时间
2016-07-27 09:45 2163$(document).ready(function(){ ... -
联动下拉框的两种实现方式
2015-11-19 11:00 846一:Ajax联动替换 $.ajax({ ... -
css浮动回到顶部按钮
2015-09-14 11:28 874<div style="height:2000 ... -
jquery多处更新处理
2015-02-09 14:25 693function check_type_message(i ... -
JS类的建立和使用
2014-10-21 10:19 639JS类的建立和使用 //类的建立和使用例子一 do ... -
文本搜索框下拉多选框效果
2014-07-25 13:32 1598实现文本框搜索多选框选择功能: 文本框搜索,多选框响应检索结果 ... -
JS操作DOM元素属性和方法
2014-07-24 13:18 724JS操作DOM元素属性和方法 javascript文档ht ... -
自动刷新页面的方法:
2013-08-05 11:05 864自动刷新页面的方法: 1.页面自动刷新:把如下代码加入< ...
相关推荐
省地市联动下拉菜单 省地市联动下拉菜单_C#_.net_web_代码 含三个下拉菜单; 数据库文件请从国家行政网站下载。编码不作改变。
在IT行业中,尤其是在网页开发领域,"省地市县4级联动JavaScript"是一种常见的地理选择功能,主要用于用户在网站上选择其所在的地理位置。这种功能能够帮助用户精确到街道级别,为物流配送、信息填写等场景提供了...
三级联动省地市ajax
本实例重点讲解如何利用jQuery实现省地市县三级联动的效果,这是一种常见的前端数据筛选和展示技术,常用于地址选择或者层级结构的筛选。 一、jQuery基础 jQuery的核心在于它的选择器,它可以方便地选取HTML元素。...
3级省地市级联菜单,ie/ff 测试通过,支持多个并存,支持事件 demo1为最简单的一份实现,页面id配置需在js文件中写入,适合简单情况 demo2增加了动态配置,可将配置项传入,适合页面存在多个级联下拉 以下为地市...
在省市区三级联动的场景中,jQuery可以监听用户在省市区选择中的交互,通过AJAX(异步JavaScript和XML)技术向服务器发送请求,获取并更新相应的市和区数据。同时,jQuery也提供了方便的方法来动态更新DOM元素,实现...
全国城市三级联动json数据是一种常见的数据格式,常用于地理信息系统(GIS)或前端网页开发中的下拉联动选择功能。这种数据结构通常包含了我国的省、市、区/县的完整层级信息,使得用户可以通过逐级选择来精确地定位...
mysql三级联动地区表,仅供各位参考,如有需要尽情下载使用
省地市拼音
省市区三级联动表,单表结构。 34省、直辖市,369市,2848县与区级数据。 -- 省级查询 select * from area where LEVEL=1 -- 市级查询 select * from area where LEVEL=2 -- 区县级查询 select * from area where ...
本文将深入探讨“四川省地市地图经纬度json数据”这一资源的用途、结构以及如何利用这些数据。 首先,标题中的“四川省地市地图经纬度json数据”表明这是一个包含四川省所有地级市和自治州的经纬度坐标的JSON文件。...
省地市三级下拉选择菜单插件1.0.mxp
标题“echarts地图全国省地市都有”表明这是一个关于ECharts在中国地图绘制方面的应用,提供了从省级到地市级的详细地图数据。 在描述中,“真的好用”表达了ECharts地图组件的易用性和实用性。用户提到分享资源的...
XX省地市医保生产系统省级支持webhis系统需求规格说明书.zip
这个压缩包“中国‘省地县乡村’五级行政区划分层详细地标.rar”显然包含了对中国这一庞大疆域细致入微的地理信息。在Google Earth这样的虚拟地球软件中,这些数据能够以三维地图的形式展现,为用户提供详尽的地理...
自己做城市级联菜单的数据库,共47497条数据,包含字段( id-表id;...可以直接拿来做城市四级联动菜单的数据库,可拓展:根据父类id添加相应的子类数据即可,这样可以将数据精确到村级别,做成五级城市级联菜单
描述中提到的"Basemap及国省地市县级数据下载完成",意味着这个压缩包包含了Basemap库以及中国各省份、地级市、县级行政区划的数据。这些数据通常是以某种格式(如Shapefile、GeoJSON或CSV)存储,用于在地图上精确...
行政区划是国家管理和组织社会事务的基础,我国的五级行政区划包括:省级行政区(省、自治区、直辖市、特别行政区)、地级行政区(地区、自治州、盟、市)、县级行政区(县、自治县、市辖区、旗)、乡级行政区(乡、...
CREATE TABLE `AREA` ( `ID` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'id', `FULLNAME` varchar(255) ...INSERT INTO `AREA` VALUES (3,'北京北京市东城区',3,'东城区','0,1,2',0,110101,0,now(),now(),2);
全国“省地县乡村”五级行政区划地标是地理信息系统(GIS)中常见的数据类型,它们用于表示中国行政区域的详细划分。这些KMZ文件包含了中国不同省份的地理信息,可以用于地图制作、数据分析、区域规划等多种用途。...