根据所选值下拉 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>