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()该元素上的函数（已在我的代码中更改）。