Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Nancy Melucci
Courses Plus Student 36,143 PointsTwo drop downs with a filter based on the selection made in one of them.
I pretty much hacked this code from JS Fiddler. I am trying to make a dropdown that selects between Intergalatic and Solar System Objects, and then the second drop down filters based on one or the other. When I tried it out in Fiddler it worked beautifully, but when I put it into my web page, the filter doesn't work.
I have looked and looked. What am I missing? I am sorry about the starter code. I am supposed to replace it eventually with information about astronomical objects. I thought I should leave it in just to be safe.
Thanks.
Code follows: JS and HTML
var $select1 = $( '#select1' ),
$select2 = $( '#select2' ),
$options = $select2.find( 'option' );
$select1.on( 'change', function() {
$select2.html( $options.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<select name="select1" id="select1">
<option value="1">Intergalatic</option>
<option value="2">Solar System</option>
</select>
<br/>
<br/>
<br/>
<br/>
<select name="select2" id="select2">
<option value="1">Andromeda Galaxy</option>
<option value="1">Omega Centuri</option>
<option value="1">M-82</option>
<option value="1">NGC-5688</option>
<option value="1">Milky Way Galaxy</option>
<option value="1">Whirlpool Galaxy<option>
<option value="2">Jupiter</option>
<option value="2">Mars</option>
<option value="2">Mercury</option>
<option value="2">Neptune<option>
<option value="2">Saturn</option>
<option value="2">Terra</option>
<option value="2">Uranus</option>
<option value="2">Venus</option>
</select>
<br/>
<br/>
<br/>
<main id="jdom">
<h1>Murach's JavaScript and DOM Scripting</h1>
<h2>Book description</h2>
<div>
<p>You can read other JavaScript books from start to finish and still not
know how to develop dynamic websites like you want to. That's because
it's DOM scripting that lets you do things like run slide shows, handle image
rollovers, rotate headlines, provide animation, and more. And it's a subject
that's glossed over or ignored in most other books.</p>
</div>
<div class="hide">
<p>But now, you can go from JavaScript beginner to DOM scripting expert in a
single book! Fast-paced, professional, and packed with expert practices, our
new JavaScript book guides you through each step as you learn how to program
sites that enhance the user experience and ensure browser compatibility.</p>
</div>
<a href="#">Show more</a>
<h2>About the author</h2>
<div>
<p>Ray Harris is an expert JavaScript programmer. That will be obvious to you
as soon as you review the 20 complete applications that he presents in this
book.</p>
</div>
<div class="hide">
<p>Ray Harris is much more than a JavaScript programmer. He has a Master's degree
in Computer Science and Artificial Intelligence. He worked on advanced
research projects at the Air Force Research Lab while he was in the USAF.
He taught information security and web development at the College of
Technology in Raleigh, North Carolina. In fact, Ray has been programming
and teaching since he was 12 years old.</p>
<p>So when Ray said he wanted to write for us, it didn't take us long to hire
him. Not only did he have the technical skills that we were looking for,
but his previous writings showed that he had an uncommon ability to think,
write, and teach.</p>
</div>
<a href="#">Show more</a>
<h2>Who this book is for</h2>
<div>
<p>Due to our unique presentation methods and this book's modular organization,
this is the right book for any web developer who wants to use JavaScript effectively.</p>
</div>
<div class="hide">
<p>Here's just a partial list of who can use this book:</p>
<ul>
<li>Web developers who know HTML and CSS and are ready to master JavaScript.</li>
<li>Web developers who program in ASP.NET, JSP, or PHP on the server side and
now want to master client-side coding.</li>
<li>Web developers who have already read 3 or 4 JavaScript or DOM scripting books
but still don't know how to do the type of DOM scripting that's required in
real-world applications</li>
</ul>
</div>
<a href="#">Show more</a>
</main>
</body>
</html>
2 Answers
Steven Parker
231,007 PointsYou might be using a secure (https) protocol on your own page.
Using an unsecured (ordinary http) protocol to load jQuery might not be successful from a page that was loaded with https. But your CDN supports https also, so try changing the protocol in the src attribute.
Nancy Melucci
Courses Plus Student 36,143 PointsI did not get a notification on the response. Thanks. I'll try it out.
Steven Parker
231,007 PointsSteven Parker
231,007 PointsIt looks like you forgot to close the first code group (with ```) so the second one got included with it (and did not get the the correct syntax coloring).