使用 jQuery/javaScript 從選擇框中動態選擇選項

Question

我正在動態添加一個選定的框項目。

我想當我選中一個復選框時，將所有附加選定框的值或選定選項設置為第一個選定框的選定選項。

所以我使用以下代碼來動態添加輸入字段。

 $(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-2"> <label for="inputState">Casting</label> <select class="form-control maintCostField" name="rows[${index}][id_casting]" id="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="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); }); });

 <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="btn btn-primary btn-lg pl-4 pr-0 check-button"> <label class="custom-control custom-checkbox mb-0 d-inline-block"> <input type="checkbox" class="custom-control-input" id="checkAll"> <span class="custom-control-label">&nbsp;</span> </label> </div> <div class="row"> <div class="col-12"> <div class="card mb-4 form_field_outer "> <div class="card-body form_field_outer_row outer" data-index="1"> <input type="hidden" id="id_projet_casting" name="id_projet_casting" /> <div class="form-row"> <div class="form-group col-md-2"> <label for="inputState">Casting</label> <select class="form-control maintCostField" name="rows[1][id_casting]" id="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="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-primary btn-lg top-right-button mr-1 add_new_frm_field_btn">Ajouter un nouveau casting</button> </div> <div class="casting_details"> <div class="casting_details2"> <div class="d-flex flex-row mb-6"> </div> </div> </div> </div> </div> </div> </div> </div>

我希望當我添加多個附加選定框並選中復選框時，所有附加選定框都獲得與第一個選定框相同的選定選項。

這意味着當我添加第一行並選擇 option1 時，所有附加行都應將 option1 作為第一行。

我仍然是 jQuery 和 JavaScript 的初學者，是否可以做到這一點，是否可以使用 jQuery 或 JavaScript 來做到這一點？

Answer 1

首先，您需要為每個選擇項設置唯一 id： id="id_casting${index}" 。

如果您的復選框已選中，則您設置選定的選項：

var checked = $("#checkAll").is(':checked')
if (checked)
     $("#id_casting" + index).val($("#id_casting").find(":selected").val());

 $(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-2"> <label for="inputState">Casting</label> <select class="form-control maintCostField" name="rows[${index}][id_casting]" id="id_casting${index}" > <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="card-body "> <button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button> </div> </div> </div></div> `); var checked = $("#checkAll").is(':checked') if (checked) $("#id_casting" + index).val($("#id_casting").find(":selected").val()); $(".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); }); });

 <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="btn btn-primary btn-lg pl-4 pr-0 check-button"> <label class="custom-control custom-checkbox mb-0 d-inline-block"> <input type="checkbox" class="custom-control-input" id="checkAll"> <span class="custom-control-label">&nbsp;</span> </label> </div> <div class="row"> <div class="col-12"> <div class="card mb-4 form_field_outer "> <div class="card-body form_field_outer_row outer" data-index="1"> <input type="hidden" id="id_projet_casting" name="id_projet_casting" /> <div class="form-row"> <div class="form-group col-md-2"> <label for="inputState">Casting</label> <select class="form-control maintCostField" name="rows[1][id_casting]" id="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="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-primary btn-lg top-right-button mr-1 add_new_frm_field_btn">Ajouter un nouveau casting</button> </div> <div class="casting_details"> <div class="casting_details2"> <div class="d-flex flex-row mb-6"> </div> </div> </div> </div> </div> </div> </div> </div>