html jquery 三级分类选择框（弹出式）可用于三级城市选择，职位分类选择，行业分类选择等

小灰灰 2022-03-20 12:09 196阅读 0赞

父级页面

<div class="form-group col-md-6">
                            <label>职位类型</label>
                            <input type="text" readonly class="form-control" name="job_cat_name"  value="" placeholder="职位类型">
                            <input type="hidden" class="form-control" name="job_cat_id" value="" placeholder="职位类型">
                        </div>
    <script>
       $('[name=job_name]').focus(function () {
            layer.open({
                type: 2,
                title: '职位选择',
                shadeClose: true,
                shade: 0.8,
                area: ['900px', '500px'],
                content: '{:url("publics/jobcathtml")}' //iframe的url
            });
        });
    </script>

弹出层页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title></title>
        <link href="__PLUGIN__/font-awesome-4.7.0/css/font-awesome.min.css"  rel="stylesheet" />
        <link href="__PLUGIN__/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="__PLUGIN__/layui/css/layui.css"  media="all">
        <link href="__CSS__/style.css" rel="stylesheet" />
        <style>
            .two_cat,.first_cat,.three_cat{ cursor: pointer; line-height: 35px;}
            .three_cat_box{  padding: 15px; border:1px solid #efeff4; margin-right: -2px;}
        </style>
    </head>
    <body>
    <div class="container-fluid">
        <div class="row" id="cat_box_sjcd">
            <div class="col-3">
                <ul class="list-unstyled" style="height: 450px; overflow-y: scroll; overflow-x: hidden;">
                    {volist name='job_cat' id='cat'}
                    <li class="first_cat" data-id="{$cat.cid}">{$cat.cat_name}</li>
                    {/volist}
                    <li>asdfsadfsf</li>
                    <li>asdfsadfsf</li>
                    <li>asdfsadfsf</li>
                    <li>asdfsadfsf</li>
                    <li>asdfsadfsf</li>
                    <li>asdfsadfsf</li>
                    <li>asdfsadfsf</li>
                    <li>asdfsadfsf</li>
                    <li>asdfsadfsf</li>
                    <li>asdfsadfsf</li>
    
                    <li>asdfsadfsf</li>
                    <li>asdfsadfsf</li>
                    <li>asdfsadfsf</li>
                    <li>asdfsadfsf</li>
                    <li>asdfsadfsf</li>
                </ul>
            </div>
            <div class="col-9">
                <div class="row">
                    <div class="col-sm-12 two_cat_box"  style="height: 450px; overflow-y: auto; overflow-x: hidden;"></div>
                </div>
            </div>
        </div>
        <div class="dd" data-content="{$job_cat}"></div>
    </div>
    </body>
    </html>
    <script src="__JS__/jquery.min.js" type="text/javascript"></script>
    <script src="__PLUGIN__/bootstrap/js/Popper.js" type="text/javascript"></script>
    <script src="__PLUGIN__/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="__PLUGIN__/layui/layui.all.js" charset="utf-8"></script>
    <script type="text/javascript">
        var arr={$job_cat|json_encode=true};
        $(".first_cat").click(function () {
            $(".first_cat").removeClass('color2');
            $(this).addClass('color2');
            var first_cat_id = $(this).data('id');
            var two_str = "<div class='row'>";
            $.each(arr[first_cat_id]['children'],function (index,item) {
                two_str += '<div class="col-sm-3 two_cat" data-parentid="'+first_cat_id+'" data-id="'+item.cid+'"><i class="fa fa-plus-square-o color2"></i> '+item.cat_name+'</div>';
                if ((index+1)%4==0){
                    two_str += "</div><div class='row'>"
                }
            })
            two_str += "</div>"
            $(".two_cat_box").html(two_str)
            $(".three_cat_box").remove()
        })
        var tubiao_old = "";
        $("#cat_box_sjcd").on('click','.two_cat',function () {
            $(this).children('i').removeClass('fa-plus-square-o');
            $(this).children('i').addClass('fa-minus-square-o');
            $(tubiao_old).children('i').addClass('fa-plus-square-o');
            $(tubiao_old).children('i').removeClass('fa-minus-square-o');
            tubiao_old  = this;
            var first_cat_id = $(this).data('parentid');
            var two_cat_id = $(this).data('id');
            var str = '<div class="col-sm-12"><div class="row three_cat_box">';
            $.each(arr[first_cat_id]['children'][two_cat_id]['children'],function (index,item) {
                str += '<div class="col-sm-3 three_cat"  data-id="'+item.cid+'">'+item.cat_name+'</div>';
            })
            str+='</div></div> ';
            $(".three_cat_box").remove()
            $(this).parent('.row').append(str);
        })
        $("#cat_box_sjcd").on('click','.three_cat',function () {
            var index = parent.layer.getFrameIndex(window.name);
            parent.$("[name=job_name]").val($(this).text());
            parent.$("[name=job_cat_id]").val($(this).data('id'))
            parent.layer.close(index)
        })
    
    </script>

后端数据按照分类结构组装

public function generateTree($array){
            //第一步 构造数据
            $items = array();
            foreach($array as $value){
                $items[$value['cid']] = $value->toArray();
            }
            //第二部 遍历数据 生成树状结构
            $tree = array();
            foreach($items as $key => $value){
                if(isset($items[$value['parent_id']])){
                    if (!isset($items[$value['parent_id']]['children'])){
                        $items[$value['parent_id']]['children']=[];
                    }
                    $items[$value['parent_id']]['children'][$value['cid']] = &$items[$key];
                }else{
                    $tree[$value['cid']] = &$items[$key];
                }
            }
            return $tree;
        }