CODEWITHSUNDEEP
javascriptjquerygoogle-chromeselectclick
user3246727
user3246727

Reputation: 111

jquery click not work on select tag in chrome

I have a problem with jquery click in my code. my code this is:

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

my code work in firefox but it's not work in chrome. how can do it?

Upvotes: 0

Views: 366

Answers (3)

bipen
bipen

Reputation: 36531

You should register your click event to select element itself and not to its options..

Making it as simple as possible. Try this

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

Upvotes: 3

Milind Anantwar
Milind Anantwar

Reputation: 82231

Click event is not valid for option elements. Use .change() event of select to show/hide element: 

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

Working Demo

Upvotes: 0

Amin Jafari
Amin Jafari

Reputation: 7207

your code would be:

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

Upvotes: 0

Related Questions