The First Dropdown Selected And Displays The Same Selected Option Value On The Second Dropdown

I have two select dropdowns. I am displaying the first dropdown on page load and the second dropdown is dynamically displaying. Now what I am doing is, When the user selects anythi

Solution 1:

You can do it like this by adding 2 small lines of code:

var fileStatus = $('.fileStatus:last option:selected').val(); // <-- This line 
$(wrapper).append('<selectname="pp_fileStatus[]"class="fileStatus"><optiondisabled=""selected="">Select</option><optionvalue="1"> One</option><optionvalue="2">Two</option><optionvalue="3"> Three</option></select>');
$('.fileStatus:last').val(fileStatus); // <-- This line 

var fileStatus = $('.fileStatus:last option:selected').val(); this will select the value of the last dropdown that exist. $('.fileStatus:last').val(fileStatus); this will set the last dropdown (aka the newly created) with the previous value.

demo

$(document).ready(function() {
  $('.fileStatus:first').change(function() {
    var fileStatus = $('.fileStatus option:selected').val();
    $('.fileStatus:last').val(fileStatus);
  })

  var wrapper = $(".appentInside .row"); //Fields wrappervar add_button = $(".click_me"); //Add button ID
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    var fileStatus = $('.fileStatus:last option:selected').val();
    $(wrapper).append('<select name="pp_fileStatus[]" class="fileStatus"><option disabled="" selected="">Select</option><option value="1"> One</option><option value="2">Two</option><option value="3"> Three</option></select>');
    $('.fileStatus:last').val(fileStatus);
  });

});

<selectname="pp_fileStatus[]"class="fileStatus"><optiondisabled=""selected="">Select</option><optionvalue="1"> One</option><optionvalue="2"> Two</option><optionvalue="3"> Three</option></select><ahref="javascript:void(0);"class="click_me">click me to display seocnd dropdown</a><divclass="appentInside"><divclass="row"></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>