CodeIgniter中从select的两个data-*属性和数组创建数组的问题

我来帮你搞定这个问题！核心痛点在于：HTML表单默认只会提交表单元素的value值，不会自动带上data-*属性的数据，所以我们需要先从前端把这两个属性的值传递到后端，再在后端整理成目标数组结构。下面分两步给出具体实现方案：

一、前端：确保Data属性数据随表单提交 #

因为你的行是动态添加的，所以在添加行和编辑模态框修改属性时，要同步把data-dep和data-category的值传递给后端。这里推荐两种简单可靠的方式：

方式1：用隐藏输入框同步数据 #

每次动态添加行时，除了select组件，额外添加两个隐藏的input元素，分别存储dep和category的值，命名规则和products[]保持索引对应：

<!-- 动态生成的行示例 -->
<div class="product-row">
  <select name="products[]" data-dep="1" data-category="3">
    <!-- 选项内容 -->
  </select>
  <input type="hidden" name="products_dep[]" value="1">
  <input type="hidden" name="products_category[]" value="3">
  <button class="edit-btn">编辑</button>
</div>

当点击编辑按钮修改select的data-*属性时，同时更新对应隐藏输入框的value：

// 假设编辑模态框确认修改后的处理逻辑
function saveEdit(selectElement, newDep, newCategory) {
  // 更新select的data属性
  selectElement.dataset.dep = newDep;
  selectElement.dataset.category = newCategory;
  // 更新对应隐藏输入框的值
  const row = selectElement.closest('.product-row');
  row.querySelector('input[name="products_dep[]"]').value = newDep;
  row.querySelector('input[name="products_category[]"]').value = newCategory;
}

方式2：打包成JSON提交 #

如果不想增加额外的输入框，可以在表单提交前，遍历所有select组件，把value、data-dep、data-category打包成JSON字符串，通过一个隐藏输入框提交：

<!-- 在表单中添加一个隐藏输入框 -->
<input type="hidden" name="products_data" id="products-data">

// 表单提交前的处理
document.querySelector('form').addEventListener('submit', function(e) {
  const products = [];
  // 遍历所有产品select
  this.querySelectorAll('select[name="products[]"]').forEach(select => {
    products.push({
      value: select.value,
      dep: select.dataset.dep,
      category: select.dataset.category
    });
  });
  // 转成JSON字符串赋值给隐藏输入框
  document.getElementById('products-data').value = JSON.stringify(products);
});

二、后端：构建包含Data属性的数组 #

根据前端的提交方式，后端有对应的处理逻辑：

对应方式1的后端处理 #

通过$this->input->post()分别获取三个数组，然后按索引循环组合：

// 获取提交的三个数组
$productValues = $this->input->post('products[]');
$productDeps = $this->input->post('products_dep[]');
$productCategories = $this->input->post('products_category[]');

// 构建目标数组
$productsWithData = [];
foreach ($productValues as $index => $value) {
  $productsWithData[] = [
    'value' => $value,
    'dep' => isset($productDeps[$index]) ? $productDeps[$index] : null,
    'category' => isset($productCategories[$index]) ? $productCategories[$index] : null
  ];
}

对应方式2的后端处理 #

获取JSON字符串并解码成数组：

// 获取JSON字符串并解码
$productsJson = $this->input->post('products_data');
$productsWithData = json_decode($productsJson, true);

// 可以额外做一些合法性校验
if (json_last_error() !== JSON_ERROR_NONE) {
  // 处理JSON解码错误
}

这样你就能得到包含每个产品value、dep和category的数组了，完全满足你的需求~

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