根据所选值下拉列表在段落中显示条件文本 cf7

Question

基于线程，我有一个下拉菜单，它在表格的下一个问题的句子中显示所选值。 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:

年份是下拉值，金额是问题（段落）中应显示的条件文本。

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

我已经学会了如何使用值来管理它，但不是根据所选值使用不同的文本。

我现在得到的代码是：

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

并获取年份：

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

输入字段 ba-maanden 用于其他用途。所以这就是为什么你也在这里看到这个。

所以我希望当有人选择特定年份时，他们会看到这个问题中上面提到的另一个数量：

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

我想我可以把金额放在 <span>year-amount</span> 之间。但是我怎样才能根据选择的年份提取金额？

非常感谢任何帮助！

此致，

瓦斯科

Answer 1

像这样？

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>

根据所选值下拉列表在段落中显示条件文本 cf7

Display conditional text in paragraph depending on chosen value dropdown cf7

html

php

wordpress

jquery

contact-form-7