Bootstrap-select 的地址联动

最新推荐文章于 2021-08-23 04:44:34 发布

weixin_33887443

最新推荐文章于 2021-08-23 04:44:34 发布

阅读量256

点赞数

文章标签： json 数据库 javascript ViewUI

原文链接：https://my.oschina.net/htzy/blog/539417

版权

为什么80%的码农都做不了架构师？>>>

地址数据来自于数据库（业务需要，地址可修改），数据库的设计：

其中pid为父节点id，lft，rgt为当前节点的子节的id范围。

数据形式：

{"area":[{"id":366,"name":"北京","pid":1,"lft":2,"rgt":5},
{"id":386,"name":"天津","pid":1,"lft":6,"rgt":9},
{"id":406,"name":"河北","pid":1,"lft":10,"rgt":35},
{"id":568,"name":"山西","pid":1,"lft":36,"rgt":59},
{"id":1121,"name":"浙江","pid":1,"lft":196,"rgt":219},
{"id":1208,"name":"安徽","pid":1,"lft":220,"rgt":255},
{"id":1303,"name":"福建","pid":1,"lft":256,"rgt":275},
{"id":1383,"name":"江西","pid":1,"lft":276,"rgt":299},
{"id":1485,"name":"山东","pid":1,"lft":300,"rgt":335},
{"id":1612,"name":"河南","pid":1,"lft":336,"rgt":371},
{"id":1760,"name":"湖北","pid":1,"lft":372,"rgt":409},
{"id":1851,"name":"湖南","pid":1,"lft":410,"rgt":439},
{"id":3019,"name":"新疆","pid":1,"lft":758,"rgt":791},
{"id":3268,"name":"重庆","pid":1,"lft":792,"rgt":795}]}

效果：

引用文件：jquery-1.11.3.js，Bootstrap3.35，Bootstrap-select1.7.2

http://jquery.com

下载：http://code.jquery.com/jquery-1.11.3.js

http://v3.bootcss.com/getting-started

下载：http://d.bootcss.com/bootstrap-3.3.5-dist.zip

http://silviomoreto.github.io/bootstrap-select/

下载：https://codeload.github.com/silviomoreto/bootstrap-select/legacy.zip/v1.7.2

页面：

<body>
    <div class="container">
        <div id="areaSelect"></div>
    </div>

</body>

js：

<script>
    $(function (){
        /**
         * 地址数据，json形式
         */
        var areaData;

        var AREA_CHINA = 1;
        // 首节点为'中国'
        createSelect(AREA_CHINA);

        /**
         * 根据地址父节点id获取地址子节点数据，
         * 并将option增加到最后一个select中
         * @param pid 地址父节点id
         * @author ShiheHuang
         */
        function createSelect(pid){
            // 根据parentId获得下一级的area json 数据
            areaData = getAreaJson(pid);
            // 延时500ms增加option选项。需要延时，否则areaData取不到值（post）
            setTimeout(appendSelect, 500);
        }

        /**
         * 根据地址父节点id，从服务器中获取下一级地址
         * 将json结果返回到areaData中，（无效地址id为0）
         * @param pid
         * @author ShiheHuang
         */
        function getAreaJson(pid){
            $.post("${pageContext.request.contextPath}/rest/area/getArea?pid="+pid,
                {},
                function(reslut){
//                    console.info("length::"+reslut.area.length);
                    if(reslut.area.length > 0){
                        areaData = reslut.area;
                    }else{
                        areaData = null;
                    }
                },"json"
            );
        }

        /**
         * append select，id加1（select节点总数）
         * @author ShiheHuang
         */
        function appendSelect(){
            if(areaData == null){
                return;
            }
            var num = $(".selectpicker").size();
            $("#areaSelect").append("<select class='selectpicker' id='area"+num+"' data-live-search='true'" +
            " style='display:none;' data-width='auto' data-size='5'><option value='0'></option></select>");
            // 绑定改变事件，（同一个节点，不要重复绑定！）
            $("#area"+num).on('change', onSelectChange);
            // render
            $('.selectpicker').selectpicker('render');
            appendOption();
        }

        /**
         * append option 到最后一个select中
         * @author ShiheHuang
         */
        function appendOption(){
            var num = $(".selectpicker").size()-1;
            for(var i in areaData){
                $("#area"+num).append("<option value='"+areaData[i].id+"'>"+areaData[i].name+"</option>");
            }
            // 新生成的option节点，需要刷新，才能显示
            $('.selectpicker').selectpicker('refresh');
        }

        /**
         * 为select绑定事件
         * @author ShiheHuang
         */
        function onSelectChange(){
            // console.info("value::"+$(this).val());
            // select由两部分组成，一个select，另外属于该select的div.btn-group bootstrap-select
            // 当前select发生改变时，去除所有下一级的select
            $(this).next().nextAll().remove();
            // 当前select值大于0（有效值），则create select，id加1（select节点总数），并根据当前select值查找下一级的数据
            if($(this).val() > 0){
                createSelect($(this).val());
            }
        }
    });

</script>

转载于:https://my.oschina.net/htzy/blog/539417