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<noob />
17,062 PointsTrying to filter options with pure js
const format = document.querySelector("#format");
const bookGroup =format.querySelectorAll("optgroup")[0];
const movieGroup = format.querySelectorAll("optgroup")[1];
const musicGroup = format.querySelectorAll("optgroup")[2];
const genre = document.querySelector("#genre");
const genreBookGroup = genre.querySelectorAll("optgroup")[0];
console.log(genreBookGroup);
const genreMovieGroup = genre.querySelectorAll("optgroup")[1];
const genreMusicGroup = genre.querySelectorAll("optgroup")[2];
function getSelectValue() {
const selectedValue = document.querySelector("#category");
var selected = selectedValue.options[selectedValue.selectedIndex].value;
console.log(selected);
if(selected === "Books") {
movieGroup.style.visibility = "hidden";
musicGroup.style.visibility = "hidden";
genreMovieGroup.style.visibility = "hidden";
genreMusicGroup.style.visibility = "hidden";
} else if(selected === "Movies") {
bookGroup.style.visibility = "hidden";
musicGroup.style.visibility= "hidden";
genreBookGroup.style.visibility = "hidden";
genreMusicGroup.style.visibility= "hidden";
}
The php code:
<?php
<th><label for="category">Category</label></th>
<td>
<select id="category" name="category" onchange="getSelectValue();">
<option value="">Select a category</option>
<option value="Books">Book</option>
<option value="Movies">Movie</option>
<option value="Music">Music</option>
</select>
</td>
?>
Im using the onchange method here this code is working but after i select a new category lets say i got confused and i choose the Book category instead of Movie, then in the format and genre fields i just see "Select a category" without any of the options.
5 Answers
Steven Parker
231,072 PointsThis code doesn't seem finished yet. There's no conditional section to handle a "Music" selection yet in "getSelectValue"; and the other sections only conceal the options not wanted, but they still need to reveal the options appropriate to the selection just made.
I assume the "optgroup" code exists in HTML that is not shown here. For future questions, please use a snapshot or be sure to share all the code, including HTML.
<noob />
17,062 PointsSteven Parker this is the snapshot: https://w.trhou.se/vkfh977ipi
the js code is in test.js, i have completed the code
Steven Parker
231,072 PointsSo it's working now, right?
<noob />
17,062 PointsSteven Parker Nope. u can see what i exactly mean if u go to the suggest page and choose a category and the rechoose.
Steven Parker
231,072 PointsIt's what I was saying about the "reveal" code missing. The current code makes the things you don't want go away, but you still need to add the part that will show the things you do want:
case "Music":
bookGroup.style.display = "none";
movieGroup.style.display = "none";
genreBookGroup.style.display = "none";
genreMovieGroup.style.display = "none";
musicGroup.style.display = ""; // reveal the music choices
genreMusicGroup.style.display = ""; // ''
break;
You'd of course need to do the same with the other categories.
<noob />
17,062 PointsHey steven this is working somehow on workspaces snapshot: http://w.trhou.se/hepxnw2on3
but in my local enviroment, WHICH IS THE SAME CODE the same effect is happenning! even though its working on worksapces
Steven Parker
231,072 PointsMaybe you're running on a cached copy from before the changes.
<noob />
17,062 PointsSteven Parker Thanks! now its working. I was very close i just didnt figure out the reveal thing which were very simple!
<noob />
17,062 Points<noob />
17,062 PointsA you are right my bad. I will post a complete snapshot later today. I know the code isn’t finished it was for testing purposes. what do u mean by “reveal”? the code right now isn’t DRY as well, any suggestions?
Steven Parker
231,072 PointsSteven Parker
231,072 PointsBy "reveal" I mean "show" or "make visible".
And possible efficiency improvement opportunities might be easier to see in the completed code.