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

在需要类选择器时，您正在使用ID选择器。也许，“将磅改成点也行，如下所示：

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

Answer 2

你去：

<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，并传入了$，这不是我给出的原始答案：）

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>

选择dropbox中的选项时，脚本将显示警告框

4 个答案: