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

最新推荐文章于 2021-06-04 05:12:58 发布

xudejun

最新推荐文章于 2021-06-04 05:12:58 发布

阅读量2k

点赞数

分类专栏： JS ajax html前端

本文链接：https://blog.csdn.net/xudejun/article/details/87111044

版权

这篇博客介绍如何使用HTML和jQuery创建一个三级联动选择框，适用于三级城市选择、职位分类选择和行业分类选择等场景。内容涵盖父级页面结构、弹出层设计以及后端数据的分类组织方式。

摘要由CSDN通过智能技术生成

父级页面

<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