Question

以下是相关的HTML代码：

<select>
    <option id="show">Traditional class</option>
    <option id="hide">Online class</option>
</select>
<div id="paypal">
    <ul class="checkbox-grid">
        <li>
            <input type="checkbox" name="text1" value="value1" style="margin-left: 10px;" />
            <label>All</label>
        </li>
        <li>
            <input type="checkbox" name="text2" value="value2" style="margin-left: 10px;" />
            <label>Mon</label>
        </li>
        <li>
            <input type="checkbox" name="text3" value="value3" style="margin-left: 10px;" />
            <label for="text3">Tue</label>
        </li>
        <li>
            <input type="checkbox" name="text4" value="value4" style="margin-left: 10px;" />
            <label for="text4">Wed</label>
        </li>
        <li>
            <input type="checkbox" name="text5" value="value5" style="margin-left: 10px;" />
            <label for="text5">Thu</label>
        </li>
        <li>
            <input type="checkbox" name="text6" value="value6" style="margin-left: 10px;" />
            <label for="text6">Fri</label>
        </li>
        <li>
            <input type="checkbox" name="text7" value="value7" style="margin-left: 10px;" />
            <label for="text7">Sat</label>
        </li>
        <li>
            <input type="checkbox" name="text8" value="value8" style="margin-left: 10px;" />
            <label for="text8">Sun</label>
        </li>
    </ul>
    <br>
    <table style="width:100%">
        <tr>
            <td>
                <select>
                    <option>hr</option>
                    <option></option>
                    <option></option>
                </select>
            </td>
            <td>
                <select>
                    <option>min</option>
                    <option></option>
                    <option></option>
                </select>
            </td>
            <td>
                <select>
                    <option>am</option>
                    <option>pm</option>
                    <option></option>
                </select>
            </td>
            <td>
                <select>
                    <option>hr</option>
                    <option></option>
                    <option></option>
                </select>
            </td>
            <td>
                <select>
                    <option>min</option>
                    <option></option>
                    <option></option>
                </select>
            </td>
            <td>
                <select>
                    <option>am</option>
                    <option>pm</option>
                    <option></option>
                </select>
            </td>
        </tr>
    </table>
</div>

隐藏/显示div（即<div id="paypal">）的相应jQuery代码如下：

<script>
    $(document).ready(function() {
        $("#show").click(function() {
            // $("#paypal").removeAttr("style");
            $("#paypal").show();
        });
    }); 
    <script> 
    $(document).ready(function() {
        $("#hide").click(function() {
            //$("#paypal").attr("style","display:none");
            $("#paypal").hide();
        });
    });
</script>

hide / show的上述功能在Mozilla Firefox中完美运行，但在Google Chrome中却不行。它始终显示<div id="paypal">。

为什么这样？请帮帮我。

感谢。

Answer 1

这是因为选项没有点击事件，因此您需要使用选择的更改事件

$(document).ready(function () {
    $("select").change(function () {
        $('#paypal').toggle(); // if you only have 2 options use toggle
    });
});

如果您有更多，可以查看所选选项的ID

$(document).ready(function () {
    $("select").change(function () {
        this[this.options.selectedIndex].id === 'show' ? $('#paypal').show() : $('#paypal').hide();
    });
});

Answer 2

<script>
$(document).ready(function(){
  $("#show").click(function(){
  // $("#paypal").removeAttr("style");
     $("#paypal").show();
  });
  $("#hide").click(function(){
    //$("#paypal").attr("style","display:none");
    $("#paypal").hide();
  });
});
</script>

您不需要两个脚本标记，也不需要两次单独调用ready。

Answer 3

<script>
$(document).ready(function(){
  $("#show").click(function(){
   // $("#paypal").removeAttr("style");
   $("#paypal").show();
  });

  $("#hide").click(function(){
    //$("#paypal").attr("style","display:none");
    $("#paypal").hide();
  });
});
</script>

使用此代码

Answer 4

简短回答：使用change事件代替click。 Check this out。（请记住，jsbin自动添加$(document).ready，您需要自己添加）

答案很长：这是一个例子。假设你有这个选择的html：

<select id="selection">
    <option value="show">Traditional class</option>
   <option value="hide">Online class</option>
</select>

然后，你只需要这个：

$(document).ready(function() {
    $("#selection").change(function(){
      if($("#selection").val() == "show"){
        $("#paypal").show();
      }
      else if($("#selection").val() == "hide"){
        $("#paypal").hide();
      }
    });
});

希望这个帮助

Answer 5

我认为您应该首先更改HTML：

<select id="display-paypal">
   <option value="show" >Traditional class</option>
   <option value="hide" >Online class</option>
</select>

然后，您将修改您的javascript，如下所示：

<script>
$(document).ready(function(){
  $("#display-paypal").change(function(){  
     if(this.val() == 'show') {
         $("#paypal").show();
     } else {
        $("#paypal").hide();
     }
  });
});
</script>

Answer 6

这可能会有所帮助！。通过对代码的一些更改来检查这个小提琴链接。

http://jsfiddle.net/bpe54j5a/

$(document).ready(function(){
$('#sel').change(function(){
    if(event.srcElement.value== 'Traditional class'){
        $("#paypal").show();
    }
    else{
        $("#paypal").hide();        
    }

});

});

我怀疑为什么它在mozilla中运行但不在chrome中的原因可能是因为您的代码中使用了未对齐的脚本标记。此外，您正在聆听选择的特定选项，这听起来不合适。

Answer 7

使用select元素的选择器并使用它.change jquery函数。

<select id="vshow">
    <option id="show">Traditional class</option>
    <option id="hide">Online class</option>
</select>

修改你的jQuery如下

$(document).ready(function(){
  $("#vshow").change(function(){
   $("#paypal").toggle();
  });
});

这是一个工作小提琴http://jsfiddle.net/bxjo3wns/。

Answer 8

我创建了一个简短的代码段。但是，切换现在需要一个额外的迁移文件，但可以处理它。

只需在点击事件中创建两个函数 -

function(){
$('#paypal').show();
},
function(){
$('#paypal').hide();
}

所以 -

 $(function(){
     $('button').toggle(
            function(){
            $('#paypal').hide();
            },
            function(){
            $('#paypal').show();
       });
    });

这样的行为 -

http://jsfiddle.net/stackmanoz/3n586z1r/

为什么show / hide div在firefox中工作但在google chrome中没有？

8 个答案: