如何通过HTML表单提交Treeselect组件选中的ID数据？

要通过HTML表单提交treeselect选中的项ID，核心思路是利用treeselectjs提供的API获取选中值，再将值同步到表单的隐藏字段中，让表单提交时携带这些数据。

步骤1：添加表单与隐藏字段 #

先在页面中搭建表单结构，新增一个隐藏input用于存储选中的ID：

<form id="my-form" action="/your-submit-url" method="POST">
  <div id="my-treeselect"></div>
  <!-- 隐藏字段，用来承载选中ID -->
  <input type="hidden" name="selected-ids" id="selected-ids">
  <button type="submit">提交</button>
</form>

步骤2：同步选中值到隐藏字段 #

有两种常用方式实现值的同步，根据你的需求选择：

方式一：表单提交时同步

在表单提交的瞬间，调用treeselect实例的getValue()方法获取选中ID，再赋值给隐藏字段：

const domElement = document.querySelector('#my-treeselect');
const treeselect = new Treeselect({
  parentHtmlContainer: domElement,
  value: [],
  options: data
});

const form = document.querySelector('#my-form');
const hiddenInput = document.querySelector('#selected-ids');

form.addEventListener('submit', function() {
  // 获取选中的ID数组
  const selectedIds = treeselect.getValue();
  // 转成逗号分隔的字符串（适配多数后端接收格式）
  hiddenInput.value = selectedIds.join(',');
  // 若后端支持JSON，也可转成JSON字符串：hiddenInput.value = JSON.stringify(selectedIds);
});

方式二：实时同步选中值

监听treeselect的change事件，每当选中项变化时就更新隐藏字段，确保提交时数据始终是最新的：

const domElement = document.querySelector('#my-treeselect');
const treeselect = new Treeselect({
  parentHtmlContainer: domElement,
  value: [],
  options: data,
  onChange: function(selectedItems) {
    // 从选中项中提取ID数组
    const selectedIds = selectedItems.map(item => item.id);
    document.querySelector('#selected-ids').value = selectedIds.join(',');
  }
});

注意事项 #

• 如果你的选项中ID字段不是id（比如用value存储ID），要把代码中的item.id改成对应字段名。
• 后端接收时，若用逗号分隔字符串，直接拆分即可得到ID数组；若用JSON字符串，需解析JSON后获取数据。

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