jQueryは「選択」アクションの後にdiv内にテキストを表示しますか？

Question

jQueryの用語は分かりません。新しい選択が行われたときにjQueryを動的に動作させ、.test divを再描画またはリロードするにはどうすればよいですか？私はtest divに表示される "大文字"のテキストのために、ページ全体をリロードする必要があります。

フィドル：https://jsfiddle.net/g7601ckw/6/

のjQuery：

var selectedsubject = $('.wpcf7-select').find(":selected").text(); 

switch (selectedsubject) { 
    case ('I Love You'): 
      $('.test').text('I Know You Do'); 
break; 
    case ('I Hate You'): 
      $('.test').text('You Don\'t'); 
break; } 

HTML：

<label>Subject 

<select name="your-subject" class="wpcf7-select"> 

<option value="">-Select a Subject-</option> 

<option value="I Love You">I Love You</option> 
<option value="I Hate You">I Hate You</option> 

</select> 
</label> 

<div class="test"></div> 

Answer 1

あなたはselectタグの.change eventを使用する必要があります。ここで

はあなたのコードに基づいて、一例である：

$(function() { 
 
    $('.wpcf7-select').change(function() { 
 
    var selectedsubject = $('.wpcf7-select').val(); 
 

 
    switch (selectedsubject) { 
 
     case ('I Love You'): 
 
     $('.test').text('I Know You Do'); 
 
     break; 
 
     case ('I Hate You'): 
 
     $('.test').text('You Don\'t'); 
 
     break; 
 
    } 
 
    }) 
 
});

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

 
<label>Subject 
 

 
<select name="your-subject" class="wpcf7-select"> 
 

 
<option value="">-Select a Subject-</option> 
 

 
<option value="I Love You">I Love You</option> 
 
<option value="I Hate You">I Hate You</option> 
 

 
</select> 
 
</label> 
 

 
<div class="test"></div>

はまた、あなたがselectタグを持っているときに.find(':selected')を必要としない、あなただけのval()を使用できることに注意してください（既にコードで変更されています）。