jQuery在「選擇」操作後在div中顯示文本？

Question

我不知道這個jQuery術語：我如何讓jQuery動態工作，並在進行新選擇時刷新或重新加載.test div？我必須重新加載「case」文本的整個頁面才能出現在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>

還要注意的是，你不需要.find(':selected')當你有一個select標籤，你可以只使用val()該元素上的函數（已在我的代碼中更改）。