select dynamically option from select-box using jQuery/javaScript

Question

I'm adding dynamically a selected box items.

I want when I check a check-box set the value or the selected option of all the additional selected-box to the selected option of the first selected box.

So I'm using the following code to add dynamically input fields.

 $(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>

I want when I Add a multiple additional selected-box and I check the checked box all the additional selected-box get the same selected option of the first selected-box.

That means when I add the first row and I select option1 , all the additional rows should get the option1 as the first additional row.

I'm still a beginner in jQuery and JavaScript, is it possible to do this and is it possible to do it with jQuery or JavaScript?

Answer 1

First you need to set unique id for each select item: id="id_casting${index}" .

Then you set selected option if your check box has checked:

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>