jQuery Not Functioning

**Kage Kazumi** · 10-12-2012, 05:07 PM

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?

**jscheuer1** · 10-12-2012, 05:30 PM

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>

**Kage Kazumi** · 10-12-2012, 05:38 PM

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