如何将全名分解为多个部分并插入多个形式？

Question

我有一个表格，可以让我选择 [选择表格] 学生的姓名（全名）。

我想将全名分解成多个部分（名字、姓氏）并将它们插入到表单中（隐藏），然后通过 ajax 将其提交到数据库。

（html 表单的代码 sn-p，这是由按钮触发的模式的一部分）

                          <div class="col-md-6">
                            <input type="hidden" class="form-control" name="first_name" required>
                          </div>

                          <input type="hidden" id="token" name="_token" value="{{csrf_token()}}">

                          <div class="col-md-6">
                            <input type="hidden" class="form-control" name="last_name" required>
                          </div>
                        </div>

                        <div class="form-group">
                            <label>Account User</label>
                            <select type="select" id="select-student" class="form-control select2 select-student" name="student" required>
                              <option value="" selected disabled>Select Student</option>
                            </select>
                        </div>

（选择表单的代码，我使用 select2 作为搜索栏）

function getAllStudents() {
    $.ajax({
            url: "students",
            type: "GET",
            success: function(data) {
              var html = '<option value="" selected disabled>Select Student</option>';
              $.each(data, function(x,y) {
                  html += '<option value="'+y.id+'">'+y.first_name+ " "+y.middle_initial+" "+y.last_name+'</option>';
              });
              $('#select-student').html(html);
            }
          });
  }

（javascript触发modal，同时触发选择列表）

$(document).on('click', '#btn-add-account', function() {
      $('#add-account-modal').modal('show');
      getAllStudents();
    });

（将信息发送到数据库的代码）

$(document).on('submit', '#form-add-account', function() {
       $.ajax({
            url: "register",
            type: "POST",
            data: $(this).serialize(),
            success: function(data) {
              if (data.success === true) {
                alert("Account Successfully Added!");
                location.reload();
              }
              else {
                alert("Something went wrong");
              }
            }
          });
            return false;
    });

附加信息，如果有帮助的话：选择列表 (select-student) 从数据库中获取学生列表，那里有 first_name、middle_initial 和 last_name 列。

谢谢！

编辑：示例 Ajax 返回如下 -

select-student 将返回学生姓名列表：

Marcus L. Pearson（格式：first_name + middle_initial + last_name） 迈克尔·杰克逊

在选择后（在本例中，我将选择 Michael K. Jackson），然后我希望将其拆分为 diff。多种形式的零件。

#first_name = 迈克尔

#middle_initial = K.

#last_name = 杰克逊

Answer 1

我怀疑你需要的是这个：

function splitName(str) {
  var r = str.split(" ");
  return {
    first_name: r[0],
    middle_initial: r[1],
    last_name: r[2]
  };
}

$('#select-student').change(function() {
  var y = splitName($("option:selected", this).text().trim());
  $("input[type='hidden'][name='first_name']").val(y.first_name);
  $("input[type='hidden'][name='last_name']").val(y.last_name);
});

您可以考虑添加唯一 ID 或唯一类，以防其他表单元素具有这些相同的属性。

把它们放在一起，它看起来像这样：

$(function() {

  function splitName(str) {
    var r = str.split(" ");
    return {
      "first_name": r[0],
      "middle_initial": r[1],
      "last_name": r[2]
    };
  }

  function getAllStudents() {
    $.ajax({
      url: "students",
      type: "GET",
      success: function(data) {
        $('#select-student').html("");
        $("<option>").val("").prop({
          selected: true,
          disabled: true
        }).appendTo($('#select-student'));
        $.each(data, function(x, y) {
          $("<option>").val(y.id).html(y.first_name + " " + y.middle_initial + " " + y.last_name).appendTo($('#select-student'));
        });
      }
    });
  }

  $('#select-student').change(function() {
    var y = splitName($("option:selected", this).text().trim());
    $("input[type='hidden'][name='first_name']").val(y.first_name);
    $("input[type='hidden'][name='last_name']").val(y.last_name);
  });

  $(document).on('click', '#btn-add-account', function() {
    $('#add-account-modal').modal('show');
    getAllStudents();
  });

  $(document).on('submit', '#form-add-account', function() {
    $.ajax({
      url: "register",
      type: "POST",
      data: $(this).serialize(),
      success: function(data) {
        if (data.success === true) {
          alert("Account Successfully Added!");
          location.reload();
        } else {
          alert("Something went wrong");
        }
      }
    });
    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
  <input type="hidden" class="form-control" name="first_name" required>
</div>

<input type="hidden" id="token" name="_token" value="{{csrf_token()}}">

<div class="col-md-6">
  <input type="hidden" class="form-control" name="last_name" required>
</div>

<div class="form-group">
  <label>Account User</label>
  <select type="select" id="select-student" class="form-control select2 select-student" name="student" required>
    <option value="" selected disabled>Select Student</option>
  </select>
</div>

由于没有示例数据且无法在 Snippet 中执行 AJAX，因此无法测试。