选择第一个下拉菜单，并在第二个下拉菜单上显示相同的所选选项值

问题描述

我有两个选择下拉菜单.我正在显示页面加载时的第一个下拉列表，而第二个下拉列表是动态显示的.

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 anything from the first dropdown then the same option to be selected on the second dropdown after a click on the anchor tag.

我尝试了下面的代码，但是有一些问题.

I tried below code but there is some issue.

$(wrapper).append('<select name="pp_fileStatus[]" class="fileStatus"><option disabled="" selected="">Select</option><option value="1"'if(fileStatus==1){"selected";}'> One</option><option value="2"' if(fileStatus==2){"selected";}'> Two</option><option value="3"'if(fileStatus==3){"selected";}'> Three</option></select>');

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

  var wrapper = $(".appentInside .row"); //Fields wrapper
  var add_button = $(".click_me"); //Add button ID
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();

    $(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>');

  });

});

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

<a href="javascript:void(0);" class="click_me">click me to display seocnd dropdown</a>
<div class="appentInside">
  <div class="row"></div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

推荐答案

您可以通过添加以下两行代码来做到这一点:

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

var fileStatus = $('.fileStatus:last option:selected').val(); // <-- This line
$(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); // <-- This line

var fileStatus = $('.fileStatus:last option:selected').val();这将选择存在的最后一个dropdown的值.

$('.fileStatus:last').val(fileStatus);这将使用previous值设置最后一个dropdown(又名新创建的).

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.

演示

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

  var wrapper = $(".appentInside .row"); //Fields wrapper
  var 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);
  });

});

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

<a href="javascript:void(0);" class="click_me">click me to display seocnd dropdown</a>
<div class="appentInside">
  <div class="row"></div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

这篇关于选择第一个下拉菜单，并在第二个下拉菜单上显示相同的所选选项值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！