Results 1 to 4 of 4

Thread: jQuery Not Functioning

  1. #1
    Join Date
    Oct 2012
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default jQuery Not Functioning

    To understand what I'm trying to do read this topic: Dropdown COntent Filter. However, I found a code that I thought would work, but it is not functioning like it should.

    When you select something from the dropdown it should hide the other paragraphs, but it doesn't seem to work for me.

    Also the site is not live so that's why their is no link.

    HTML Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    </head>
    
    <body>
    
    <select name="division-select" id="division-select">
        <option value="halter">Halter</option>
        <option value="english">English</option>
    </select>
    
    <div>
        <p class="halter">halter class 1</p>
        <p class="halter">halter class 2</p>
        <p class="english">english class 1</p>
        <p class="english">english class 2</p>
    </div><script>
    $("#division-select").bind("change", function() {
        $("." + this.value).show();
        $("p:not(." + this.value + ")").hide();
    });​
    </script>
    
    </body>
    </html>
    What am I doing wrong here?
    Last edited by Kage Kazumi; 10-12-2012 at 06:31 PM. Reason: Added info.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If you're testing locally you need to use the http: prefix for the external hosted jQuery script. And there appear to be some invisible non-standard characters in the code, at least as pasted into your above post. Try:

    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    </head>
    
    <body>
    
    <select name="division-select" id="division-select">
        <option value="halter">Halter</option>
        <option value="english">English</option>
    </select>
    
    <div>
        <p class="halter">halter class 1</p>
        <p class="halter">halter class 2</p>
        <p class="english">english class 1</p>
        <p class="english">english class 2</p>
    </div>
    
    <script>
    $("#division-select").bind("change", function() {
        $("." + this.value).show();
        $("p:not(." + this.value + ")").hide();
    });
    </script>
    
    </body>
    </html>
    Additionally, no need to 'not' if you change the order:

    Code:
    <script>
    $("#division-select").bind("change", function() {
        $("p").hide();
        $("." + this.value).show();
    });
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2012
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Resolved: See this thread

    That made it work.

    How would I go about adding more dropdowns (i.e.):

    {Operating System {Type} {Free/Commercial} {Reset}

    The first three are other filters, but the last one would be a reset button. The script & html was pre-made and I need it to do more then what it can: Dropdown Content Filter

    v/Respectfully,
    Kage
    Last edited by Kage Kazumi; 10-12-2012 at 06:31 PM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You might want to check out:

    http://www.appelsiini.net/projects/chained
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Gallery script not functioning
    By jessamca in forum JavaScript
    Replies: 5
    Last Post: 03-18-2012, 05:32 PM
  2. Replies: 4
    Last Post: 12-19-2010, 09:46 AM
  3. flvtool2 Stopped Functioning
    By bluewalrus in forum Computer hardware and software
    Replies: 0
    Last Post: 06-16-2010, 12:41 AM
  4. jQuery script not functioning on IE.
    By chickenx in forum JavaScript
    Replies: 4
    Last Post: 09-10-2008, 09:00 AM
  5. sql not functioning on submit
    By pkcidstudio in forum MySQL and other databases
    Replies: 5
    Last Post: 08-03-2006, 08:48 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •