美文网首页
区域三级联动

区域三级联动

作者: Ch思磊 | 来源:发表于2017-08-08 14:56 被阅读0次

    1.需要导入两个js,一个是distpicker.data.js,另一个是distpicker.js
    2.可以自己新建一个js,放入下面代码,.distpicker()是初始化,可以修改.distpicker()里面的属性(注意声明要在第三点的js后面):

    $(function () {
        'use strict';
        var $distpicker = $('#distpicker');
        $distpicker.distpicker({
            province: '福建省',
            city: '厦门市',
            district: '思明区'
        });
        $('#reset').click(function () {
            $distpicker.distpicker('reset');
        });
        $('#reset-deep').click(function () {
            $distpicker.distpicker('reset', true);
        });
        $('#destroy').click(function () {
            $distpicker.distpicker('destroy');
        });
        $('#distpicker1').distpicker();
        $('#distpicker2').distpicker({
            province: '---- 所在省 ----',
            city: '---- 所在市 ----',
            district: '---- 所在区 ----'
        });
        $('#distpicker3').distpicker({
            autoSelect: false
        });
        $('.province').distpicker({
            autoSelect: false
        });
    });
    

    3.1.可以先在三级区域前面加一个隐藏的Input框存放区域代码,用来与后台交互:

    <input id="area" type="text" name="resume.area" value="000000" style="position:absolute;top:-999px"/>
    <div id="setArea" class="province">
           <div class="form-group">
                   <label class="sr-only">Province</label>
                   <select class="form-control area" onchange="getAreaCode(this,1)"></select>
            </div>
            <div class="form-group">
                    <label class="sr-only">City</label>
                    <select class="form-control area" onchange="getAreaCode(this,2)"></select>
             </div>
             <div class="form-group">
                     <label class="sr-only">District</label>
                     <select class="form-control area" onchange="getAreaCode(this,3)"></select>
              </div>
              <div class="clearfix"></div>
    </div>
    

    3.2.获取用户选择的区域代码:

    /*获取区域代码*/
        function getAreaCode(c, count) {
            var code = $(c).parents(".province").children().eq(count - 1).children("select").val();
            if (count == 1 && code == "") {
                code = "000000";
            } else if (count == 2 && code == "") {
                code = $(c).parents(".province").children().eq(count - 2).children("select").val();
            } else if (count == 3 && code == "") {
                code = $(c).parents(".province").children().eq(count - 2).children("select").val();
            }
            $(c).parents(".province").prev().attr("value", code);
        }
    

    3.3.1.若后台有传默认的区域代码给前端,前端可以使用下面代码初始化:

    $("#experience .content-box:eq(" + count + ") .province").distpicker({
          province: e1,
          city: e2,
          district: e3,
          autoSelect: false
    });
    

    3.3.2.这是详细的前端获取后台传的区域代码后显示的代码:

    var expectarea = "${resumeDTO.resume.expectarea}";
    if (expectarea == "") {
        $("#setExpectarea").distpicker({
             autoSelect: false
         });
    } else {
         var expectarea1 = "${resumeDTO.resume.expectarea}".substring(0, 2) + "0000";
         var expectarea2 = "${resumeDTO.resume.expectarea}".substring(0, 4) + "00";
         var expectarea3 = "${resumeDTO.resume.expectarea}";
         var e1 = JSON.stringify(ChineseDistricts[86][expectarea1]);
         var e2 = JSON.stringify(ChineseDistricts[expectarea1][expectarea2]);
         var e3 = JSON.stringify(ChineseDistricts[expectarea2][expectarea3]);
         if (e1 == undefined || e1 == '') {
              e1 = "—— 省 ——";
         } else {
              e1 = e1.substring(1, e1.length - 1);
         }
         if (e2 == undefined || e2 == '') {
              e2 = "—— 市 ——";
         } else {
              e2 = e2.substring(1, e2.length - 1);
         }
         if (e3 == undefined || e3 == '') {
              e3 = "—— 区 ——";
         } else {
              e3 = e3.substring(1, e3.length - 1);
         }
         $("#setExpectarea").distpicker({
              province: e1,
              city: e2,
              district: e3,
              autoSelect: false
         });
    }
    

    网盘:https://pan.baidu.com/s/1c2jGNZy
    提取码:9gwa

    相关文章

      网友评论

          本文标题:区域三级联动

          本文链接:https://www.haomeiwen.com/subject/wcsylxtx.html