jquery - 无法使用 laravel 获取多个动态行的值

问题描述

我有以下脚本，它动态添加多个输入字段。

$("body").on("click", ".add_new_frm_field_btn", function() {

  var random = 1 + Math.floor(Math.random() * 1000); //generate random values..
  var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
  //added data-index and outer..class
  $(".form_field_outer").append(
    `<div class="col-12 outer" data-index="${index}_${random}">
            <div class="card-body form_field_outer_row"> 
            <div class="form-row"><div class="form-group col-md-4">
             <label for="inputState">Casting</label>
                <select id="id_casting" class="form-control" name="id_casting[]">
                        <option selected>Choose...</option>
                        @foreach($castings as $casting)
                          <option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
                          @endforeach
                     </select>
                     </div>
                     <div class="form-group col-md-4"><label for="inputState">Type de contrat</label><select id="id_modele_contrat" class="form-control" name="id_modele_contrat[]"> <option selected>Choose...</option><option>...</option> </select></div><div class="card-body "><button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button></div>
        </div></div></div> `);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="card mb-4 form_field_outer  ">
  <div class="card mb-4 form_field_outer  ">
    <div class="card-body form_field_outer_row outer" data-index="0">
      <button type="button" class="btn btn-outline-primary mb-1 add_new_frm_field_btn">Ajouter un nouveau casting</button>
      <input type="hidden" id="id_projet_casting" name="id_projet_casting" />
      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="inputState">Casting</label>
          <select id='id_casting_1' class="form-control" name="id_casting[]">
            <option selected>Choose...</option>
            @foreach($castings as $casting)
            <option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
            @endforeach
          </select>
        </div>
        <div class="form-group col-md-4">
          <label for="inputState">Type de contrat</label>
          <select id="id_modele_contrat_1" class="form-control" name="id_modele_contrat[]">
            <option selected>Choose...</option>
            @foreach($models_contrat as $model_contrat)
            <option data-id="{{$model_contrat->id_modele_contrat}}" value="{{$model_contrat->id_modele_contrat}}">{{$model_contrat->modele_contrat}}</option>
            @endforeach
          </select>
        </div>
        <div class="card-body ">
          <button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>

        </div>
      </div>
    </div>
  </div>

问题是当我添加多个选择框并放入控制器时：

dd($request()->all());

例如，如果我添加 3 个选择框，我只会得到一个选择框，而不是所有添加的 selected_box 。

"id_casting" => array:1 [
    0 => "18"
  ]
  "id_modele_contrat" => array:1 [
    0 => "Choose..."
  ]

虽然它应该是：

"id_casting" => array:3 [
        0 => "18"
        1 => "19"
        2 => "20"
      ]
      "id_modele_contrat" => array:3 [
        0 => "1"
        1 => "2"
        2 => "3"
      ]

问题是什么？

如何获取每个添加行的 select_box 的值？

更新

当我添加multiple到选择标签时，我得到如下信息：

它不再是一个选择框，也不能解决问题

我正在尝试使用 laravel做这样的事情http://demo.webslesson.info/dynamic-input-fields/

标签： jqueryajaxlaravel

<select id='id_casting_1' class="form-control" name="id_casting[]" multiple> <option selected>Choose...</option> @foreach($castings as $casting) <option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option> @endforeach </select>

jquery - 无法使用 laravel 获取多个动态行的值

问题描述

解决方案

推荐阅读