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

父级页面

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

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

Redmi K50电竞版细节揭晓：金属中框+弹出式肩键2.0
经过了很长一段时间的爆料和官方预热,日前全新的Redmi K50系列终于得到官宣,不过最先亮相的仅有一款机型--K50电竞版.作为Redmi在2022年的开年大作和专为K系列用户打造的硬核Dream ...
点击输入框弹出文字html,jQuery实现点击文本框弹出热门标签的提示效果
jQuery实现点击文本框弹出热门标签的提示示例_网页代码站 body { font-size:12px;font-family:Arial; } #m_tagsItem { background:# ...
html 弹出复选框,js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解 ...
jQuery实现点击文本框弹出热门标签的提示示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
html5搜索框在最右侧,html5搜索框特效点击搜索框弹出分类搜索框代码
特效描述:html5搜索框特效点击搜索框弹出分类搜索框.点击搜索框弹出分类搜索框代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Search People Sara Soue ...
php 点击文本框弹出时间,点击Input框弹出日期选项
点击text文本框弹出日期选择器 body{margin:0;padding:0;font:14px Verdana, Arial, sans-serif;line-height:200%;} #co ...
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
点击文本框弹出热门标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
bootstrap 模态框弹出就消失了_bootstrap模态框消失问题的解决方法
这篇文章主要为大家详细整理了bootstrap模态框消失不消失各种问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不 ...
Ajax弹出式无刷新城市选择特效
为什么80%的码农都做不了架构师?>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

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

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

最新文章

热门文章