Question

我的代码中出现了jquery点击问题。我的代码是：

        <script>
        $(document).ready(function(){
          $("#hide").click(function(){
            $(".mapg").hide();
          });
          $("#show").click(function(){
            $(".mapg").show();
          });
        });
    </script>

    <select name="showmapg" id="showmapg" class="form-control" required>
        <option value="0">Select</option>
        <option id="show" value="1">Yes</option>
        <option id="hide" value="2">No</option>
    </select>

    <p class="mapg" style="display: none;">Hello</p>

我的代码在firefox中工作，但它在chrome中不起作用。怎么办呢？

Answer 1

您应该注册您的点击事件以选择元素本身而不是其选项..

尽可能简单。试试这个

＆＃13;

$(document).ready(function(){
          $("#showmapg").change(function(){ // or .click(function(){
             if(this.value == 2) {
                $(".mapg").hide();
             }else{ //use else if , if you want to nothing to happen on select option
              $(".mapg").show();
             }
          });
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="showmapg" id="showmapg" class="form-control" required>
        <option value="0">Select</option>
        <option id="show" value="1">Yes</option>
        <option id="hide" value="2">No</option>
    </select>

    <p class="mapg" style="display: none;">Hello</p>

＆＃13;

Answer 2

您的代码将是：

<script>
    $(document).ready(function(){
      $("#showmapg").change(function(){
        if($(this).val()==1){
          $('.mapg').show();
        }
        else if($(this).val()==2){
          $('.mapg').hide();
        }
      });
    });
</script>

Answer 3

Click事件对选项元素无效。使用select .change()事件来显示/隐藏元素：

$('#showmapg').change(function(){
  if($(this).val()=="1")
    $(".mapg").show();
  else
    $(".mapg").hide();
 });

<强> Working Demo

jquery点击不适用于chrome中的select标签

3 个答案: