Jquery 使用下拉选项隐藏/显示在 IE 或 CHROME 中不起作用

Question

我有一个多个下拉菜单，用于隐藏/显示表中的行。

示例：

 <select name="kp1_action" class="longboxsmall">
     <option class="hidenextrow" value="">Button Disabled</option>
    <option class="showtransferoptions" value="transfercall">Transfer Call + Log Keypress to Reports</option>
    <option  class="shownextrow" value="logkeypress">Log Keypress to Reports Only</option>
    <option  class="shownextrow" value="optout">Optout of Call List</option>
  </select>

我已经为每个不同的选项分配了类，这样我就可以在单击它们时触发事件，这是我的 jQUERY。

        $(".shownextrow").click(function() { 
  $(this).closest("tr").next().show().find('.longboxsmall').hide();
});

                        $(".showtransferoptions").click(function() { 
  $(this).closest("tr").next().show().find('.longboxsmall').show();
});



                $(".hidenextrow").click(function() { 
  $(this).closest("tr").next().hide().find('.longboxsmall').hide();
});

在 Firefox 中一切正常，但在 IE 或 CHROME 中却不行，这是为什么？有没有更好的方法来完成上述操作？

Answer 1

我会将“change”事件绑定到 SELECT，然后在事件处理程序中评估 SELECT 的值。

$("SELECT[name=kp1_action]").change(function()
{
    if(this.value == "transfercall") {
        ...
    }
    // OR
    if($(this).hasClass("shownextrow")) {
        ...
    }
});