0

所以我的网站上有以下表格（部分由 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

4

4 回答 4

0

当需要类选择器时，您正在使用 ID 选择器。也许，“将英镑改为一个点会起作用，如下所示：

$('.wpcf7-form-control-wrap your-university').live(...
于 2013-10-13T01:56:32.310 回答
0

干得好：

<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$

于 2013-10-13T01:59:29.567 回答
0

请删除 # 这是选择元素的 ID 并替换为 。(dot) 这是一个可以解决您的问题的类选择器。

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

于 2013-10-13T02:39:56.230 回答
0

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

         <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>
于 2013-10-13T02:40:39.157 回答