Display conditional text in paragraph depending on chosen value dropdown cf7

Question

Base on this thread I have a dropdown menu which shows the chosen value in sentence of the next question of the form. Now I would also like, when one of the values is chosen, another question of the form shows some other text in the sentence, like this:

Year is dropdown value and amount is the conditional text what should be shown in the question (paragraph).

2020: 30.846,- 2019: 30.360,- 2018: 30.000,- 2017: 25.000,- 2016: 24.437,-

I've learned how to managed this with the value, but not with different text depending of the chosen value.

The code I now have to get the years:

<p>Did you unsubscribed yourself in <span id="recent-years"></span>?</p>
[radio radio-uitgeschreven-nl class:inline-control "Yes" "No"]

And to get the years:

<script>
jQuery(document).ready(function( $ ){
$('select[name="recent-years"]').on('change', function(){
   updateParagraph(); 
});
updateParagraph();

function updateParagraph(){
// Assign variable $placeholder to the chosen value
   let $placeholder = $('select[name="recent-years"]').val();
   // replace 'your-field-name' with the cf7 field name
   $('input[name="ba-maanden"]').attr('placeholder', $placeholder);
   //New code to also add to the form html
   $('#recent-years').html($placeholder);
 }
});
</script>

The input field ba-maanden is for something else. So that's why you see this also here.

So I would like when someone selects a specific year they'll see another amount like mentioned above in this question:

<p>Do you have endowment insurance or savings account of more than 30.846 EUR?</p>
[radio radio-kapitaal-spaar class:inline-control "Ja" "Nee"]

I guess I can put the amount between something like <span>year-amount</span>. But how can I pull the amount depending on the chosen year?

Any help would be very much appreciated!

Best regards,

Vasco

Answer 1

Like this ?

jQuery(document).ready(function($){
  $('select[name="recent-years"]').on('change', function(){
     changeQuestion($(this)); 
  });
  $('input[name="confirm-insurance"]').on('change', function(){
     changeQuestion($(this)); 
  });
});

function changeQuestion(object, selector){
  let currentParagraph = $(object).closest('.question');
  let currentValue = $(object).val();
  let nextParagraph = $(object).closest('.question').next('.question');
  
  $(currentParagraph).fadeOut("slow", function() {
    $(nextParagraph).show().removeClass('hide');
    $(nextParagraph).find('.lastAnswer').text(currentValue);
  });
}

.hide {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="question">
  Did you unsubscribed yourself in 
  <span id="recent-years">
   <select name="recent-years">
     <option selected="true" disabled="disabled">Select year</option>
     <option value="30.846">2020</option>
     <option value="30.360">2019</option>
   </select>
  </span> ?
</p>

<p class="question hide">
  Do you have endowment insurance or savings account of more than <span class="lastAnswer"></span> ?<br>Yes <input type="radio" name="confirm-insurance" value="yes"> No <input type="radio" name="confirm-insurance" value="no">
</p>

<p class="question hide">
  Your answer is <span class="lastAnswer"></span>.
</p>