`

省地市联动js

    博客分类:
  • js
 
阅读更多
方案一
 <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);
      });
分享到:
评论

相关推荐

    省地市联动下拉菜单_C#_.net_web_代码

    省地市联动下拉菜单 省地市联动下拉菜单_C#_.net_web_代码 含三个下拉菜单; 数据库文件请从国家行政网站下载。编码不作改变。

    省地市县4级联动JavaScript,探测到街道

    在IT行业中,尤其是在网页开发领域,"省地市县4级联动JavaScript"是一种常见的地理选择功能,主要用于用户在网站上选择其所在的地理位置。这种功能能够帮助用户精确到街道级别,为物流配送、信息填写等场景提供了...

    三级联动省地市ajax

    三级联动省地市ajax

    jquery 实现省地市县三级联动源码经典例子

    本实例重点讲解如何利用jQuery实现省地市县三级联动的效果,这是一种常见的前端数据筛选和展示技术,常用于地址选择或者层级结构的筛选。 一、jQuery基础 jQuery的核心在于它的选择器,它可以方便地选取HTML元素。...

    省、市、地区联动JS选择应用,省市地区JS

    3级省地市级联菜单,ie/ff 测试通过,支持多个并存,支持事件 demo1为最简单的一份实现,页面id配置需在js文件中写入,适合简单情况 demo2增加了动态配置,可将配置项传入,适合页面存在多个级联下拉 以下为地市...

    asp.net+JQuery 省市区三级联动

    在省市区三级联动的场景中,jQuery可以监听用户在省市区选择中的交互,通过AJAX(异步JavaScript和XML)技术向服务器发送请求,获取并更新相应的市和区数据。同时,jQuery也提供了方便的方法来动态更新DOM元素,实现...

    全国城市三级联动json数据

    全国城市三级联动json数据是一种常见的数据格式,常用于地理信息系统(GIS)或前端网页开发中的下拉联动选择功能。这种数据结构通常包含了我国的省、市、区/县的完整层级信息,使得用户可以通过逐级选择来精确地定位...

    mysql三级联动地区表(最全)

    mysql三级联动地区表,仅供各位参考,如有需要尽情下载使用

    附录 C、省地市拼音重名特殊命名.doc

    省地市拼音

    省市区三级联动表结构以及数据

    省市区三级联动表,单表结构。 34省、直辖市,369市,2848县与区级数据。 -- 省级查询 select * from area where LEVEL=1 -- 市级查询 select * from area where LEVEL=2 -- 区县级查询 select * from area where ...

    四川省地市地图经纬度json数据.zip

    本文将深入探讨“四川省地市地图经纬度json数据”这一资源的用途、结构以及如何利用这些数据。 首先,标题中的“四川省地市地图经纬度json数据”表明这是一个包含四川省所有地级市和自治州的经纬度坐标的JSON文件。...

    省地市三级下拉选择菜单插件1.0.mxp

    省地市三级下拉选择菜单插件1.0.mxp

    echarts地图全国省地市都有

    标题“echarts地图全国省地市都有”表明这是一个关于ECharts在中国地图绘制方面的应用,提供了从省级到地市级的详细地图数据。 在描述中,“真的好用”表达了ECharts地图组件的易用性和实用性。用户提到分享资源的...

    XX省地市医保生产系统省级支持webhis系统需求规格说明书.zip

    XX省地市医保生产系统省级支持webhis系统需求规格说明书.zip

    中国“省地县乡村”五级行政区划分层详细地标.rar

    这个压缩包“中国‘省地县乡村’五级行政区划分层详细地标.rar”显然包含了对中国这一庞大疆域细致入微的地理信息。在Google Earth这样的虚拟地球软件中,这些数据能够以三维地图的形式展现,为用户提供详尽的地理...

    中国城市四级联动数据库 包含省市县区/乡(街道)数据

    自己做城市级联菜单的数据库,共47497条数据,包含字段( id-表id;...可以直接拿来做城市四级联动菜单的数据库,可拓展:根据父类id添加相应的子类数据即可,这样可以将数据精确到村级别,做成五级城市级联菜单

    Basemap地图插件及中国省地市县级书数据.rar

    描述中提到的"Basemap及国省地市县级数据下载完成",意味着这个压缩包包含了Basemap库以及中国各省份、地级市、县级行政区划的数据。这些数据通常是以某种格式(如Shapefile、GeoJSON或CSV)存储,用于在地图上精确...

    全国“省地县乡村”五级行政区划地标

    行政区划是国家管理和组织社会事务的基础,我国的五级行政区划包括:省级行政区(省、自治区、直辖市、特别行政区)、地级行政区(地区、自治州、盟、市)、县级行政区(县、自治县、市辖区、旗)、乡级行政区(乡、...

    中国地区 省市三级联动 sql脚本 数据库 mysql

    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);

    最便宜全国“省地县乡村”五级行政区划地标(KMZ)

    全国“省地县乡村”五级行政区划地标是地理信息系统(GIS)中常见的数据类型,它们用于表示中国行政区域的详细划分。这些KMZ文件包含了中国不同省份的地理信息,可以用于地图制作、数据分析、区域规划等多种用途。...

Global site tag (gtag.js) - Google Analytics