如何让jQuery serializeArray获取下拉选中文本，且少改Blade代码？

不用修改Blade模板，直接在JS层面处理即可，核心思路是先获取serializeArray()的原始数据，再单独提取下拉框的选中文本，将其合并到数组中，具体实现如下：

单一下拉框场景 #

假设表单里的下拉框name为category_id，按以下步骤处理：

1. 获取表单的serializeArray()原始数据
2. 提取下拉框的选中文本
3. 将文本以新增字段或扩展原有项的方式加入数组

$('form').submit(function(e) {
  e.preventDefault();
  const $form = $(this);
  
  // 用serialize()提交数据保存
  $.easyAjax({
    url: $form.attr('action'),
    type: $form.attr('method'),
    data: $form.serialize(),
    success: function() {
      // 1. 获取原始serializeArray数据
      let formDataArray = $form.serializeArray();
      
      // 2. 提取下拉框选中文本
      const selectedText = $form.find('select[name="category_id"] option:selected').text();
      
      // 3. 方式一：新增独立字段到数组（推荐，不破坏原有结构）
      formDataArray.push({
        name: 'category_name', // 自定义字段名，对应选中文本
        value: selectedText
      });
      
      // 方式二：扩展原有下拉框项的属性（如果track函数需要从原项取文本）
      // const catItem = formDataArray.find(item => item.name === 'category_id');
      // if (catItem) catItem.text = selectedText;
      
      // 传给track函数
      track(formDataArray);
    }
  });
});

多个下拉框场景 #

如果表单有多个下拉框，可自动遍历所有select元素，批量添加对应选中文本：

$('form').submit(function(e) {
  e.preventDefault();
  const $form = $(this);
  
  $.easyAjax({
    url: $form.attr('action'),
    type: $form.attr('method'),
    data: $form.serialize(),
    success: function() {
      let formDataArray = $form.serializeArray();
      
      // 遍历所有下拉框，添加对应文本字段
      $form.find('select').each(function() {
        const selectName = $(this).attr('name');
        const selectedText = $(this).find('option:selected').text();
        
        // 字段名格式为【原name + _text】，比如category_id -> category_id_text
        formDataArray.push({
          name: `${selectName}_text`,
          value: selectedText
        });
      });
      
      track(formDataArray);
    }
  });
});

内容的提问来源于stack exchange，提问作者Techna-sta