Log in

View Full Version : Resolved 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 (http://www.dynamicdrive.com/forums/showthread.php?71640-Dropdown-Content-Filter&p=284359#post284359). 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.



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


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


<script>
$("#division-select").bind("change", function() {
$("p").hide();
$("." + this.value).show();
});
</script>
Kage Kazumi
10-12-2012, 05:38 PM
Resolved: See this thread (http://www.dynamicdrive.com/forums/showthread.php?71654-Adding-More-Options-to-the-PHP-JScript&p=284392#post284392)

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 (http://www.dynamicdrive.com/forums/showthread.php?71640-Dropdown-Content-Filter&goto=newpost)

v/Respectfully,
Kage
jscheuer1
10-13-2012, 04:23 PM
You might want to check out:

http://www.appelsiini.net/projects/chained