$(document).ready(function () {
    $('#createGallery').hide();

    $("#newGallery").click(function () {
        $("#createGallery").show('slow');
    });
    $("#gallerySelect > option").not("#newGallery").click(function () {
        $("#createGallery").hide('slow');
    });
});

I can't figure out why. Seems easy enough. my HTML is in HAML. But its easy to understand if you don't know what HAML is. My HAML reads :

        #createGallery
          %span{ :style => "color:#1B75BC; font-size: 15px;" }
            new gallery
          %br
          %form{ :action => ""}
            %input{ :name => "tabname", :type => "text", :rows => "1", :cols => "30", :style => "height: 15px; width: 260px; margin-right: 40px;"}

        %span{ :style => "color:#1B75BC; font-size: 15px;" }
          gallery

        %form{ :action => ""}
          %select#gallerySelect{ :name => "Choose Gallery", :style => "width:260px" }
            %option{ :selected => "selected", :value => "QuickFact" }
              Choose Gallery
            %option{ :value => "QuickFact"}
              My Interior Design
            %option#newGallery{ :value => "QuickFact" }
              New Gallery
        %br

$(document).ready(function () {
    $('#createGallery').hide();

    $("#newGallery").click(function () {
        $("#createGallery").show('slow');
    });
    $("#gallerySelect > option").not("#newGallery").click(function () {
        $("#createGallery").hide('slow');
    });
});

I can't figure out why. Seems easy enough. my HTML is in HAML. But its easy to understand if you don't know what HAML is. My HAML reads :

        #createGallery
          %span{ :style => "color:#1B75BC; font-size: 15px;" }
            new gallery
          %br
          %form{ :action => ""}
            %input{ :name => "tabname", :type => "text", :rows => "1", :cols => "30", :style => "height: 15px; width: 260px; margin-right: 40px;"}

        %span{ :style => "color:#1B75BC; font-size: 15px;" }
          gallery

        %form{ :action => ""}
          %select#gallerySelect{ :name => "Choose Gallery", :style => "width:260px" }
            %option{ :selected => "selected", :value => "QuickFact" }
              Choose Gallery
            %option{ :value => "QuickFact"}
              My Interior Design
            %option#newGallery{ :value => "QuickFact" }
              New Gallery
        %br

• javascript
• jquery
• internet-explorer
• cross-browser
• show-hide

Share Improve this question Follow edited Jan 27, 2020 at 4:42 ankitkanojia 3,12244 gold badges2424 silver badges3737 bronze badges asked May 8, 2009 at 16:51 TripTrip 27.1k4848 gold badges162162 silver badges281281 bronze badges 1

• Does it work in other browsers? Your title implies that it does but it's not explicit. – Michael Haren Commented May 8, 2009 at 16:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I don't believe that OPTION elements have click events. You'll want to attach the click handler to the SELECT element, and then check the option that was chosen.\

(disclaimer: air-coded)

$(document).ready(function(){
    $('#createGallery').hide();
    $("#gallerySelect").click(function () {
        if (this.options[this.selectedIndex].id == 'newGallery') {
            $("#createGallery").show('slow');
        } else {
            $("#createGallery").hide('slow');
        }
    });
});

It would help to get the HTML for the current page, as well as to know a little more about the problem.

• Which version of IE is having the problem?
• Is it just the hiding / showing of of #createGAllery that isn't working, or is the click event not firing at all?
• What does alert($("#gallerySelect > option").not("#newGallery").length); or alert($("#gallerySelect > option").length); return?

All your option elements have the same value... This is typically not how this element is used. Also, if you are going to hide your element right off the bat, you can just set it as such in your HAML (unless, of course, you want non-JS users to see it by default). It would make more sense if you did something along the lines of this:

$(function(){ 
    $("#gallerySelect").bind('change',function () {
        if($(this).val() == 'newGallery') {
            $("#createGallery").show('slow');   
        } else {
            $("#createGallery").hide('slow');
        }    
    });

});

With HAML something like this:

    #createGallery{:style => "display:none;" }
      %span{ :style => "color:#1B75BC; font-size: 15px;" }
        new gallery
      %br
      %form{ :action => ""}
        %input{ :name => "tabname", :type => "text", :rows => "1", :cols => "30", :style => "height: 15px; width: 260px; margin-right: 40px;"}

    %span{ :style => "color:#1B75BC; font-size: 15px;" }
      gallery

    %form{ :action => ""}
      %select#gallerySelect{ :name => "Choose Gallery", :style => "width:260px" }
        %option{ :selected => "selected", :value => "chooseGal" }
          Choose Gallery
        %option{ :value => "designInterior"}
          My Interior Design
        %option{ :value => "newGallery" }
          New Gallery
    %br