jQuery單擊不適用於Chrome中的選擇標簽

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

您應該注冊click事件以選擇元素本身而不是其選項。

使它盡可能簡單。 嘗試這個

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

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事件對於選項元素無效。 使用.change()事件顯示/隱藏元素：

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

工作演示