SharePoint页面<select>选择状态的跨页面持久化保存问题

嘿，这个问题我熟！你现在的<select>下拉框只是前端本地控件，选完刷新就重置了，而且每个用户看到的都是自己本地的选择状态。要实现所有用户访问都能看到最新的选择结果，核心是把选中值存在SharePoint的共享存储里，而不是用户本地。我给你两个实用方案，按需选择：

方案一：用自定义列表存储（直观易维护） #

这个方案适合需要留存历史记录，或者团队需要查看选择变更轨迹的场景：

第一步：创建自定义列表 #

1. 打开你的SharePoint站点，点击右上角「设置」→「添加应用」→「自定义列表」
2. 给列表命名，比如「排班选择记录」，创建完成后进入列表设置
3. 添加一个单行文本类型的字段，命名为「SelectedPerson」（记住这个字段名，后面代码要用到）

第二步：修改页面代码 #

把你原来的下拉框代码替换成下面的内容（注意替换字段内部名称，如果字段名有空格，内部名称会变成类似Selected_x0020_Person，可以在列表设置里查看字段的内部名称）：

<select id="sectionid" size="1">
  <option value="0">Person 1</option>
  <option value="1">Person 2</option>
  <option value="2">Person 3</option>
  <option value="3">Person...</option>
</select>

<script type="text/javascript">
// 等待SharePoint核心脚本加载完成
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
  var context = SP.ClientContext.get_current();
  var web = context.get_web();

  // 页面加载时读取最新选择值
  function loadSelectedValue() {
    var list = web.get_lists().getByTitle('排班选择记录');
    // 查询列表第一条记录（用来存储最新选择）
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><RowLimit>1</RowLimit></View>');
    var items = list.getItems(camlQuery);

    context.load(items);
    context.executeQueryAsync(function() {
      if (items.get_count() > 0) {
        var item = items.itemAt(0);
        // 替换成你创建的字段内部名称
        var selectedValue = item.get_item('SelectedPerson');
        var selectBox = document.getElementById('sectionid');
        selectBox.value = selectedValue;
      }
    }, function(sender, args) {
      console.error('读取选择记录失败: ' + args.get_message());
    });
  }

  // 保存选择值到列表
  function saveSelectedValue(selectedVal) {
    var list = web.get_lists().getByTitle('排班选择记录');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><RowLimit>1</RowLimit></View>');
    var items = list.getItems(camlQuery);

    context.load(items);
    context.executeQueryAsync(function() {
      var listItem;
      if (items.get_count() > 0) {
        // 更新已有记录
        listItem = items.itemAt(0);
        listItem.set_item('SelectedPerson', selectedVal);
        listItem.update();
      } else {
        // 首次选择，创建新记录
        var createInfo = new SP.ListItemCreationInformation();
        listItem = list.addItem(createInfo);
        listItem.set_item('SelectedPerson', selectedVal);
        listItem.update();
      }
      context.executeQueryAsync(function() {
        console.log('选择已成功保存！');
      }, function(sender, args) {
        console.error('保存选择失败: ' + args.get_message());
      });
    }, function(sender, args) {
      console.error('查询列表失败: ' + args.get_message());
    });
  }

  // 页面加载时初始化下拉框状态
  loadSelectedValue();

  // 监听下拉框变化事件，保存新选择
  document.getElementById('sectionid').addEventListener('change', function() {
    saveSelectedValue(this.value);
  });
});
</script>

注意事项 #

• 确保所有访问页面的用户都有「排班选择记录」列表的读写权限，不然无法保存或读取数据
• 字段内部名称一定要准确，别用显示名称，不然会读取失败

方案二：用站点属性存储（轻量无需额外列表） #

如果不需要留存历史记录，只是想快速存储最新选择，用站点属性更轻量，不需要创建额外列表：

直接替换成下面的代码即可：

<select id="sectionid" size="1">
  <option value="0">Person 1</option>
  <option value="1">Person 2</option>
  <option value="2">Person 3</option>
  <option value="3">Person...</option>
</select>

<script type="text/javascript">
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
  var context = SP.ClientContext.get_current();
  var web = context.get_web();

  // 读取站点属性中的选择值
  function loadSelectedValue() {
    var webProperties = web.get_allProperties();
    context.load(webProperties);
    context.executeQueryAsync(function() {
      var selectedVal = webProperties.get_item('ShiftSelectedPerson');
      if (selectedVal) {
        document.getElementById('sectionid').value = selectedVal;
      }
    }, function(sender, args) {
      console.error('读取站点属性失败: ' + args.get_message());
    });
  }

  // 保存选择值到站点属性
  function saveSelectedValue(selectedVal) {
    var webProperties = web.get_allProperties();
    webProperties.set_item('ShiftSelectedPerson', selectedVal);
    web.update();
    context.executeQueryAsync(function() {
      console.log('选择已保存！');
    }, function(sender, args) {
      console.error('保存站点属性失败: ' + args.get_message());
    });
  }

  // 初始化下拉框
  loadSelectedValue();

  // 监听下拉框变化
  document.getElementById('sectionid').addEventListener('change', function() {
    saveSelectedValue(this.value);
  });
});
</script>

注意事项 #

• 站点属性需要有站点编辑权限才能修改，所以确保用户有对应的权限
• 这个方案不会留存历史记录，每次新选择会覆盖旧值

最后小提示 #

在SharePoint Designer里编辑页面时，建议把这段代码放在「脚本编辑器」WebPart中，或者页面的<asp:Content ContentPlaceHolderId="PlaceHolderMain">区域内，避免破坏页面原有结构。

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