javascript - jquery 单击在 Chrome 中的选择标签上不起作用

Question

我的代码中的 jquery click 出现问题。我的代码是:

        <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

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

让它尽可能简单。试试这个

$(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();
             }
          });
        });

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