使用 Laravel、jQuery 获取所选项目并动态显示新的 html 块

Question

我创建了一个动态添加输入字段或行的脚本。 在动态添加的行中，我有一个选定的框。 所以我创建了另一个脚本，当我从选定的弓形中选择一个项目时，会显示一个新的块 HTML。 并且我想在这个显示的bloc中显示，从选中框里选中id的图片。

所以我使用以下代码：

我的看法：

    <div class="col-12">
        <div class="card mb-4 form_field_outer  ">
            <div class="card-body form_field_outer_row ">
             <form>
                <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> 
            </form>
            </div>

        </div>


    </div>
 <div>
    <div class="card mb-4 casting_details  ">
    <div class="card-body casting_details2 ">
    <div class="d-flex flex-row mb-3 ">
        <a class="d-block position-relative" href="#">
            <img src="img/products/marble-cake-thumb.jpg" alt="Marble Cake"
            class="list-thumbnail border-0" />
            <span
            class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span>
        </a>
    </div>
    </div>
    </div>
</div>

动态添加新行的脚本：

$(document).ready(function(){

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

                console.log("clicked");

                var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
                $(".form_field_outer").append(
                    `
                    <div class="col-12">

                    <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>
                    `);

                $(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
                $(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);

            });


        }); 

这就是动态添加一个新的块HTML的脚本，用于在选定的框中显示选定项目的图片。

$("body").on("change","select[name=id_casting]",function(){
                $(".casting_details").append(
                    `
                    <div class="card-body casting_details2 ">
                                <div class="d-flex flex-row mb-3 ">
                    <a class="d-block position-relative" href="#">
                                        <img src="img/products/marble-cake-thumb.jpg" alt="Marble Cake"
                                        class="list-thumbnail border-0" />
                                        <span
                                        class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span>
                                    </a>
                                    </div>
                                    </div>
                    `);

                 let id_casting = $(this).find("option:selected").data("id");
                 $.get('/getCasting/'+id_casting,function(data){

                 $("#casting_details2").html(data);

           });
            });
        });

我的控制器，用于在选定的框中获取选定 id 的图片。

public function getCasting()

    {
        $id_casting = request('id_casting');

        $castings = Casting::where('id_casting',$id_casting)->get();

       /* dd($states);*/
    
        $option = "<div class='d-flex flex-row mb-3 casting_details2'>
                                    <a class='d-block position-relative' href='#'>
                                        <img src='img/products/marble-cake-thumb.jpg' alt='Marble Cake'
                                        class='list-thumbnail border-0' />
                                        <span
                                        class='badge badge-pill badge-theme-2 position-absolute badge-top-right'>NEW</span>
                                    </a>
                                </div>";


        foreach($castings as $casting){
            $option.= '<div class="d-flex flex-row mb-3 casting_details2">
                                    <a class="d-block position-relative" href="#">
                                        <img src="/castingimages/'.$casting->photo.'" alt="Marble Cake"
                                        class="list-thumbnail border-0" />
                                        <span
                                        class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span>
                                    </a>
                                </div>';
        }
        return $option;
    }

我遇到的问题是：

当我从选定的框中选择一个项目时，它每次都会显示一个新的 bloc html，而我希望当我连续选择一个项目时，只需为每个新添加一个 html 块排。换句话说，如果我选择了选中框的一个元素，则必须添加一个 html 块，但如果我再次选择另一个元素，则它不能添加或显示新的 html 块。

当我选择一个项目时广告，所选项目的图片不显示。

我试了好几次都没有解决。

更新

我正在尝试显示所选项目的图像

我正在使用以下代码：

$("body").on("change", "select[name=id_casting]", function() {
    var index = $(this).closest(".outer").data('index') //get outer div index..

    //check if the data-id not there
    if ($(".casting_details [data-index= " + index + "]").length == 0) {
      //append new...
      $(".casting_details").append(`<div data-index= "${index}" class="card-body casting_details2"> <div class="d-flex flex-row mb-3 "> <a class="d-block position-relative" href="#"><img src="img/products/marble-cake-thumb.jpg" alt="Marble Cake" class="list-thumbnail border-0" /> <span  class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span></a></div></div> `);
    }


    let id_casting = $(this).find("option:selected").data("id");

          $.ajax({
          
           url:"getCasting/"+id_casting,
           dataType:"json",
           type:"GET",
           success:function(html){
            
                    $(".casting_details [data-index= " + index + "]").html(`"<div class='d-flex flex-row mb-3'><a class='d-block position-relative' href='#'><img src={{ URL::to('/') }}/castingimages/"` + html.data.photo +` " alt='Marble Cake' class='list-thumbnail border-0'  /><span class='badge badge-pill badge-theme-2 position-absolute badge-top-right'>NEW</span>
                        </a></div>"`
                        );
           }

       });
  });

和以下控制器：

public function getCasting()

    {
        $id_casting = request('id_casting');

        $castingss = Casting::where('id_casting',$id_casting)->get();

        dd($castingss);
    
        return view('Projet.ajout_projet')
            ->with('castingss', $castingss);
    }

当我从选定的框中选择一个项目时，我没有得到这个选定项目的图像，但是当我看到我的网络时，我在网络中有选定项目的数据，我想问题在于在上显示图像我的看法。

如果你有任何想法，我会很高兴

更新2

$("body").on("change", "select[name=id_casting]", function() {
    var index = $(this).closest(".outer").data('index') //get outer div index..

    //check if the data-id not there
    if ($(".casting_details [data-index= " + index + "]").length == 0) {
      //append new...
      $(".casting_details").append(`<div data-index= "${index}" class="card-body casting_details2"> <div class="d-flex flex-row mb-3 "> <a class="d-block position-relative" href="#"><img src="img/products/marble-cake-thumb.jpg" alt="Marble Cake" class="list-thumbnail border-0" /> <span  class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span></a></div></div> `);

      console.log(index);
    }


    let id_casting = $(this).find("option:selected").data("id");

          $.ajax({
          
           url:"getCasting/"+id_casting,
           dataType:"json",
           type:"GET",
           success:function(html){
            
                    $(".casting_details [data-index= " + index + "]").html(`"<div class='d-flex flex-row mb-3'><a class='d-block position-relative' href='#'><img src={{ URL::to('/') }}/castingimages/"` + html.data.photo +` " alt='Marble Cake' class='list-thumbnail border-0'  /><span class='badge badge-pill badge-theme-2 position-absolute badge-top-right'>NEW</span>
                        </a></div>"`
                        );
           }

       });
  });

Answer 1

每当您在 form_field_outer 中添加新的 div 时，您也会向它们添加数据属性。然后，每当用户从选择框中选择任何选项时，您都可以检查data-index 是否存在于casting_details 中，具体取决于此添加新div，然后使用$(".casting_details [data-index= " + index + "]").html(data) 将来自ajax 调用的响应添加到所需的div。

另外，如果行被删除，你必须删除这个div，所以我也在remove_node_btn_frm_field点击事件中添加了代码。

演示代码：

$(document).ready(function() {

  $("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><option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option> </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> `);
    $(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
    $(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
  });
  $("body").on("click", ".remove_node_btn_frm_field", function() {
    var index = $(this).closest(".outer").data('index') //get index
    $(".casting_details [data-index= " + index + "]").remove() //remove genrated casting_details2 as well
    $(this).closest(".outer").remove()
  })
  $("body").on("change", "select[name=id_casting]", function() {
    var index = $(this).closest(".outer").data('index') //get outer div index..

    //check if the data-id not there
    if ($(".casting_details [data-index= " + index + "]").length == 0) {
      //append new...
      $(".casting_details").append(`<div data-index= "${index}" class="card-body casting_details2"> <div class="d-flex flex-row mb-3 "> <a class="d-block position-relative" href="#"><img src="img/products/marble-cake-thumb.jpg" alt="Marble Cake"class="list-thumbnail border-0" /> <span  class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span></a></div></div> `);
    }
    let id_casting = $(this).find("option:selected").data("id");
    // $.get('/getCasting/' + id_casting, function(data) {
    //add content inside that
    $(".casting_details [data-index= " + index + "]").html("ADDED HERE...."); //data

    //});
  });
})

<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="col-12">
  <div class="card mb-4 form_field_outer">
    <!--added outer and data-index-->
    <div class="card-body form_field_outer_row outer" data-index="0">
      <form>
        <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>
              <option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
            </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>
            <button type="button" class="btn btn-outline-warning mb-1 add_new_frm_field_btn">Add</button>
          </div>
        </div>
      </form>
    </div>

  </div>


</div>
<div>
  <div class="card mb-4 casting_details ">
<!-- will come here-->
  </div>