SharePoint表单基于前置选项的级联筛选需求及jQuery实现咨询

一、准备数据源列表 #

先建立两个基础列表存储关联数据：

• 项目列表：字段包含项目ID（唯一标识，单行文本/数字）、项目名称（显示用，单行文本）
• 工具关联列表：字段包含关联项目ID（与项目列表的项目ID对应）、工具名称（单行文本）、负责人（人员字段/单行文本，按需选择）

二、嵌入脚本到添加表单 #

在SharePoint条目添加表单（NewForm.aspx）中添加内容编辑器Web部件，插入以下代码：

1. 引入jQuery（页面未加载时） #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

注：内网无法访问外部CDN时，可将jQuery文件上传至SharePoint文档库，替换为内部路径

2. 核心级联逻辑代码 #

$(document).ready(function() {
    // 替换为你表单中实际的字段内部名称
    const projectField = "项目选择";
    const toolField = "工具选择";
    const ownerField = "工具负责人";

    // 初始隐藏工具、负责人下拉框
    $(`select[title='${projectField}']`).parent().show();
    $(`select[title='${toolField}']`).parent().hide();
    $(`select[title='${ownerField}']`).parent().hide();

    // 项目选择变更时筛选对应工具
    $(`select[title='${projectField}']`).change(function() {
        const selectedProjectId = $(this).val();
        if (!selectedProjectId) {
            $(`select[title='${toolField}']`).parent().hide();
            $(`select[title='${ownerField}']`).parent().hide();
            return;
        }

        // 调用SharePoint REST API拉取关联工具数据
        $.ajax({
            url: `${_spPageContextInfo.webAbsoluteUrl}/_api/web/lists/getbytitle('工具关联列表')/items?$filter=关联项目ID eq '${selectedProjectId}'&$select=工具名称,负责人`,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function(res) {
                const toolSelect = $(`select[title='${toolField}']`);
                toolSelect.empty().append("<option value=''>请选择工具</option>");
                
                // 填充工具选项并绑定负责人数据
                res.d.results.forEach(item => {
                    const ownerName = item.负责人 ? item.负责人.Title : "";
                    toolSelect.append(`<option value='${item.工具名称}' data-owner='${ownerName}'>${item.工具名称}</option>`);
                });

                $(`select[title='${toolField}']`).parent().show();
                $(`select[title='${ownerField}']`).parent().hide().val('');
            },
            error: function(err) {
                console.log("工具数据加载失败：" + JSON.stringify(err));
            }
        });
    });

    // 工具选择变更时自动填充负责人
    $(`select[title='${toolField}']`).change(function() {
        const selectedOwner = $(this).find("option:selected").data("owner");
        if (selectedOwner) {
            $(`select[title='${ownerField}']`).val(selectedOwner);
            $(`select[title='${ownerField}']`).parent().show();
        } else {
            $(`select[title='${ownerField}']`).parent().hide().val('');
        }
    });
});

三、关键注意事项 #

• 字段内部名称替换：代码中所有字段名称需替换为你SharePoint列表的实际内部名称（可通过列表设置→字段设置查看）
• 权限配置：确保用户拥有工具关联列表的读取权限，否则API调用会失败
• 人员字段适配：若负责人是人员字段，需根据表单字段类型调整赋值逻辑（比如填充用户账号用item.负责人.LoginName）
• 站点兼容性：经典SharePoint站点表单直接可用；新式站点需调整脚本适配新式表单结构，或改用SPFx组件

内容的提问来源于stack exchange，提问作者Saraka2000