手写一个二级下拉树选项

轻墨

2023 年 08 月 22 日

458 次浏览

暂无评论

4993字数

技术分享

效果:

![image.png](https://www.qmsldg.com/usr/uploads/2023/08/4262527618.png)

前端代码: 这个是结合layui写的前端

```html
  <div class="layui-form-item">
                                                <div class="layui-inline">
                                                    <label class="layui-form-label layui-required">项目名称</label>
                                                    <div class="layui-input-inline">
                                                        <select lay-verify="required" lay-reqtext="请选择项目名称" name="name1" lay-search lay-filter="category" id="category">
                                                            <option value="">请选择</option>
                                                            
                                                        </select>
                                                    </div>
                                                </div>

<div class="layui-inline" id="subCategoryContainer" style="display: none;">
                                                    <div class="layui-input-inline">
                                                        <select name="name2" lay-search lay-filter="subCategory" id="subCategory">
                                                            <option value="">请选择</option>
                                                            
                                                        </select>
                                                    </div>
                                                </div>
```

```javascript
<script>
    var $ = layui.jquery;
    var form = layui.form;
    var categoryData ={$tree | raw};

var $categorySelect = $('#category');
    var $subCategoryContainer = $('#subCategoryContainer');
    var $subCategorySelect = $('#subCategory');

// 填充一级分类下拉框
    $.each(categoryData, function(index, category) {
        $categorySelect.append('<option value="' + category.id + '">' + category.name + '</option>');
    });

// 设置默认选中值
    var name = '{$project.name}';
    var nameParts = name.split(',');
    var firstCategoryId = parseInt(nameParts[0]);
    var secondCategoryId = nameParts.length > 1 ? parseInt(nameParts[1]) : null;

$categorySelect.val(firstCategoryId);
    form.render('select');

// 判断是否显示二级分类下拉框
    function showSubCategory() {
        var selectedCategoryId = $categorySelect.val();

// 查找选中的一级分类对象
        var selectedCategory = categoryData.find(function(category) {
            return category.id === parseInt(selectedCategoryId);
        });

if (selectedCategory && selectedCategory.children && selectedCategory.children.length > 0) {
            $subCategoryContainer.show();
            $subCategorySelect.empty().append('<option value="">请选择</option>');

$.each(selectedCategory.children, function(index, subCategory) {
                $subCategorySelect.append('<option value="' + subCategory.id + '">' + subCategory.name + '</option>');
            });

if (secondCategoryId && secondCategoryId !== null) {
                $subCategorySelect.val(secondCategoryId);
            }
            form.render('select');
        } else {
            $subCategoryContainer.hide();
        }
    }

// 监听一级分类选择
    form.on('select(category)', function(data) {
        showSubCategory();
    });

// 初始时根据一级分类值显示/隐藏二级分类
    showSubCategory();
</script>
```

后端的数据格式: 需要转json传入前端

```php
  $this->assign('tree',json_encode($tree));
```

```php
Array
(
    [0] => Array
        (
            [id] => 1
            [name] => 四川省工业发展专项资金
            [pid] => 0
            [sort] => 0
            [status] => 1
            [children] => Array
                (
                    [0] => Array
                        (
                            [id] => 2
                            [name] => 产业化项目和技术改造项目
                            [pid] => 1
                            [sort] => 0
                            [status] => 1
                        )

[1] => Array
                        (
                            [id] => 3
                            [name] => 产业技术研发和创新平台建设项目
                            [pid] => 1
                            [sort] => 0
                            [status] => 1
                        )

[2] => Array
                        (
                            [id] => 4
                            [name] => 产业园区项目
                            [pid] => 1
                            [sort] => 0
                            [status] => 1
                        )

)

[1] => Array
        (
            [id] => 8
            [name] => 四川省科技服务业专项
            [pid] => 0
            [sort] => 0
            [status] => 1
            [children] => Array
                (
                    [0] => Array
                        (
                            [id] => 9
                            [name] => 产业示范项目
                            [pid] => 8
                            [sort] => 0
                            [status] => 1
                        )

[1] => Array
                        (
                            [id] => 10
                            [name] => 服务平台项目
                            [pid] => 8
                            [sort] => 0
                            [status] => 1
                        )

)

)
)
```

最后修改：2023 年 08 月 22 日