- 浏览: 288878 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
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 1118<span class="ui label ... -
一些常用的ui框架组合
2018-10-09 17:52 983amaze zUI 开源HTML5跨屏框架 window. ... -
连续点赞异步触发计数
2018-09-30 22:19 816防止连续触发异步请求,2秒发送一次计数 ... -
jQuery.fn.extend(object)合并相同单元列
2018-09-18 15:24 925jQuery中$.fn的用法示例介绍 https://www ... -
js解决搜索框传参数的一种方案
2017-10-26 11:20 443$(".button-to-export-sea ... -
基于semantic既可以下拉框也可以文本框输入
2017-07-10 10:07 967<div class="field & ... -
ajax提交json数据返回文件流下载excell
2017-06-02 14:45 1456ajax异步无法返回下载文件 可以通过添加from表单隐藏域的 ... -
rails全国订单发货热力图
2017-05-03 15:02 933路由配置 get '/monitor' => 'da ... -
ruby调用echart的柱状饼状图
2017-04-27 14:35 1045sql = "select GROUP_CON ... -
Rials实现下拉框联动的两种实现方式
2017-04-07 10:26 514一:partial模版替换 $(document). ... -
js动态生成的节点关联
2017-03-31 15:18 557有效方法: $(document).on('click' ... -
扫码枪发商品快递时录入发货快递单号到对应产品订单明细
2016-08-11 14:46 1346运用场景:扫码枪发商品快递时录入发货快递单号到对应产品订单明细 ... -
moment.js实现客户端显示本地时间
2016-07-27 09:45 2132$(document).ready(function(){ ... -
联动下拉框的两种实现方式
2015-11-19 11:00 816一:Ajax联动替换 $.ajax({ ... -
css浮动回到顶部按钮
2015-09-14 11:28 845<div style="height:2000 ... -
jquery多处更新处理
2015-02-09 14:25 656function check_type_message(i ... -
JS类的建立和使用
2014-10-21 10:19 611JS类的建立和使用 //类的建立和使用例子一 do ... -
文本搜索框下拉多选框效果
2014-07-25 13:32 1569实现文本框搜索多选框选择功能: 文本框搜索,多选框响应检索结果 ... -
JS操作DOM元素属性和方法
2014-07-24 13:18 694JS操作DOM元素属性和方法 javascript文档ht ... -
自动刷新页面的方法:
2013-08-05 11:05 837自动刷新页面的方法: 1.页面自动刷新:把如下代码加入< ...
相关推荐
省地市联动下拉菜单 省地市联动下拉菜单_C#_.net_web_代码 含三个下拉菜单; 数据库文件请从国家行政网站下载。编码不作改变。
省地市县4级联动JavaScript,探测到街道,包含地市js文件
三级联动省地市ajax
jquery 实现省地市县三级联动源码经典例子jquery 实现省地市县三级联动源码经典例子jquery 实现省地市县三级联动源码经典例子jquery 实现省地市县三级联动源码经典例子
3级省地市级联菜单,ie/ff 测试通过,支持多个并存,支持事件 demo1为最简单的一份实现,页面id配置需在js文件中写入,适合简单情况 demo2增加了动态配置,可将配置项传入,适合页面存在多个级联下拉 以下为地市...
本代码实现了 省地县三级联动展现,从xml文件中读取省地县的数据。
省市区三级联动表,单表结构。 34省、直辖市,369市,2848县与区级数据。 -- 省级查询 select * from area where LEVEL=1 -- 市级查询 select * from area where LEVEL=2 -- 区县级查询 select * from area where ...
省地市拼音
mysql三级联动地区表,仅供各位参考,如有需要尽情下载使用
使用asp.net + Jquery 实现.附带数据库脚本(oracle版本)
省地市三级下拉选择菜单插件1.0.mxp
echarts地图全国省地市都有,真的好用,有没有人下载没关系,只为自己以后要用时有地方可以下载,请求通过
四川省地市地图经纬度json数据;包含了四川省所有的地市州的地图经纬度数据,需要自己绘制地图的拿去用
XX省地市医保生产系统省级支持webhis系统需求规格说明书.zip
官网下载比较慢。basemap及国省地市县级数据下载完成。适合python3.7版本,64位;亲测可用。
php+ajax无刷新实现省地市三级联动,代码详细简单,通俗易懂,适合新手借鉴,学习,下载之后立刻可以使用
江苏电网省地县一体化电量智能采集系统研究.rar
中国“省地县乡村”五级行政区划分层详细地标,非常详细的全国地图
中 国分省地图册,试试吧,很不错的小软件,你一定会喜欢的!
省地市县全表Excel,目前看到比较全的,又是Excel的列表