当选择从Dropbox的一个选项，脚本显示一个警告框

Question

所以我有这个以下形式，是在我的网站（部分由WordPress插件生成）：

<p>Your University<br /> 
     <span class="wpcf7-form-control-wrap your-university"><select name="your-university" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required"> 
<option value="Brock University">Brock University</option> 
<option value="McMaster University">McMaster University</option> 
<option value="Queen&#039;s University">Queen&#039;s University</option> 
<option value="University of Guelph">University of Guelph</option> 
<option value="University of Toronto">University of Toronto</option> 
<option value="UofT Mississauga">UofT Mississauga</option> 
<option value="UofT Scarborough">UofT Scarborough</option> 
<option value="University of Waterloo">University of Waterloo</option> 
<option value="York University">York University</option> 
<option value="Western University (UWO)">Western University (UWO)</option> 
<option value="Other">Other</option> 
</select> 
</span> 
</p> 

我想要的东西，就好像此表单上的人选择了某个项目（即麦克马斯特大学），即会显示一个JavaScript警告框。所以我在上面提到的一系列代码中加入了以下代码。

<script> 
    $(document).ready(function(){ 
    $(':input#wpcf7-form-control-wrap your-university').live('change',function(){ 
    var sel_opt = $(this).val(); 
    alert(sel_opt); 
    if(sel_opt=="McMaster University") 
    { 
     alert("Message for McMaster"); 
    } 
    else if(sel_opt=="York University") 
    { 
     alert("Message for York"); 
    } 
     else if(sel_opt=="Other") 
     { 
     alert("Message for Other"); 
     } 
    }); 
}); 
    </script> 

这就是说，它不工作！我明白为什么它可能不起作用的一个原因是，在我学习的其他示例中，表单只有wordpress的插件不会产生任何类似的内容......任何人都可以帮助我修改代码，以便它可以工作？

谢谢！ ：D

Answer 1

在这里你去：

<p>Your University<br /> 
    <span class="wpcf7-form-control-wrap your-university"><select name="your-university" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required"> 
<option value="Brock University">Brock University</option> 
<option value="McMaster University">McMaster University</option> 
<option value="Queen&#039;s University">Queen&#039;s University</option> 
<option value="University of Guelph">University of Guelph</option> 
<option value="University of Toronto">University of Toronto</option> 
<option value="UofT Mississauga">UofT Mississauga</option> 
<option value="UofT Scarborough">UofT Scarborough</option> 
<option value="University of Waterloo">University of Waterloo</option> 
<option value="York University">York University</option> 
<option value="Western University (UWO)">Western University (UWO)</option> 
<option value="Other">Other</option> 
</select> 
</span> 
</p> 

jQuery(document).ready(function($){ 
$('.wpcf7-form-control').change(function(){ 
var sel_opt = jQuery(this).val(); 
alert(sel_opt); 
if(sel_opt=="McMaster University") 
{ 
    alert("Message for McMaster"); 
} 
else if(sel_opt=="York University") 
{ 
    alert("Message for York"); 
} 
    else if(sel_opt=="Other") 
    { 
    alert("Message for Other"); 
    } 
}); 
}); 

编辑：

在SO策略/用户的利益

，让解释我改变一行：

$(':input#wpcf7-form-control-wrap your-university').live('change',function(){... 

到

$('.wpcf7-form-control').change(function(){... 

您还会注意到我jQuery在第一调用替换$和$我给它wasnt在原来的答案:)

Answer 2

当需要类选择器时，您正在使用ID选择器。也许，“改变英镑的点会工作，如下图所示：

$('.wpcf7-form-control-wrap your-university').live(... 

Answer 3

请删除＃这是一个ID选择元素传递并替换为。 （点）这是一个类选择器应该解决您的问题。

此外，您的代码似乎与旧版本的jQuery。 从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。 由于您使用的是旧版本的jQuery，因此您可以使用.delegate（）方法（jQuery 1.4.3+）优先于live（）。

Answer 4

如果你只是有一个选择，你可以这样做：

  <script type="text/javascript"> 
    $(document).ready(function(){ 

$('select').on('change', function(event) { 
    /* Act on the event */ 
    var sel_opt = $(this).val(); 
    alert(sel_opt); 
    if (sel_opt == "McMaster University") { 
     alert("Message for McMaster"); 
    } else if (sel_opt == "York University") { 
     alert("Message for York"); 
    } else if (sel_opt == "Other") { 
     alert("Message for Other"); 
    } 

}); 
}); 
</script>