省地市联动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);
      });