javascript - Wordpress Contact-form 7 - 使用 Jquery 的预订表单功能

Question

我已经使用 WordPress 插件 Contact-form 7 创建了一个表单。我目前有一个下拉列表字段，理想情况下，从该列表中选择任何选项并在下面有一个描述会很棒，该描述会发生变化每次选择一个主题时。

原因是我目前正在设计一个用于教育目的的预订表单，并且下拉列表包含各种主题。一旦您点击主题，如果每次它都会自动在其下方显示该类(class)的描述，那就太好了。

.enquiry-contain {
    padding:100px 0;
  }

  .school-enquiry {
    background-color:rgba(0, 0, 0, 0.72);
    border-radius:10px;
    padding:50px;
  }

  .bg-image {

    width:100%;
    background: url(https://www.durrell.org/wildlife/wp-content/uploads/2017/01/MG_3919-v2.jpg) fixed;
    color: #fff;
    height: 100%;
    margin: 0;
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .wc-durrell-footer {
    margin-top:0;
  }

  .wpcf7-text, .wpcf7-date, .wpcf7-select, .wpcf7-textarea{
    color: black;
    font-family: 'AvantGardeGothicITCW01B 731069';
    padding:5px;
    border-radius: 5px;≈
  }

  .wpcf7-textarea, .session-choice {    
    width: 100%;
  } 

<?php get_header(); ?>

<section class="bg-image">

<div class="container enquiry-contain">

<h1 style="text-align:center;">Jersey Booking Form</h1>
<div class="row" style="margin: 0 3px 0 3px;">
<div class="col-md-2 hidden-sm"></div>
<div class="col-md-1 hidden-sm"></div>
<div class="school-enquiry col-md-6">
<h6 style="color:#70D100;">Please complete all fields below before you click submit</h6>
<?php echo do_shortcode('[contact-form-7 id="10012426" title="Jersey school booking form"]'); ?>
</div>
</div>
  
</div>

</section>

<?php get_footer(); ?>

这是 WordPress Contact-Form 7 代码:

[text* your-name placeholder "Name of teacher *"]
[text* school-name placeholder "Name of school *"]
[email* your-email placeholder "Email address"]
[tel* phone-number placeholder "Phone number"]

可能的访问日期:

[date* date-of-visit placeholder "Potential date of visit"]

潜在访问时间:

[select* time-of-visit include_blank "9:30PM " "10:30PM "
 "11:30PM " "12:30PM " "13:30PM " "14:30PM " "15:30PM " "16:30PM"]

选择您的 session :

[select* taught-sessions class:session-choice 
   "KS1 - Classification " 
   "KS1 - Food chains and habitats " 
   "KS2 - Gerald Durrell " 
   "KS2 - Rainforest " 
   "KS2 - Teeth " 
   "KS3 - The Gerald Durrell Story " 
   "KS3 - The Gerald Durrell story " 
   "KS3 - Ethics illegal trade in wildlife" 
   "KS3 - Biodiversity and conservation explored " 
   "KS3* - Introduction to Durrell " 
   "KS3* - Animal observations** " 
   "KS4 - Animal observations** " 
   "KS4 - Ethics - Mountain chickens " 
   "KS4 - Biodiversity and conservation extended " 
   "KS4* - Microbiology in the workplace** " 
   "AS & A-LEVEL - Animal observations** " 
   "AS & A-LEVEL - Geography case study* "
 ]

有关 session 的更多信息:

[textarea Additional-information maxlength:200 
  placeholder "Additional information... 
  e.g physical or learning difficulties"]

[submit "Submit"]

Answer 1

您的问题必须具体。仅看到您的表格我们无法回答您的问题。您将数据存储在哪里，哪个描述针对哪个主题？

你可以做类似的事情，例如下拉菜单

class="subject"

然后您可以从中选择任何主题。

 sub1="MATH";
 SUB2="English";
 Desc1="MATH is Love";
 Desc2="English is important";

$(".subject").change(function()
     var sub= (this).val();
 if(sub== sub1)
   {
      $(".desc").html(Desc1);
   }
  else{
     $(".desc").html(Desc2);
   }
   });

desc 是为要显示说明的 div 或输入提供的类。