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

PHP Build a Basic PHP Website (2018) Enhancing a Form Requesting Specific Information

Posted by <noob />
<noob />
17,062 Points

Trying 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.

Steven Parker

5 Answers

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

This 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 />
<noob />
17,062 Points

A 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
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

By "reveal" I mean "show" or "make visible".

And possible efficiency improvement opportunities might be easier to see in the completed code.

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

Steven Parker this is the snapshot: https://w.trhou.se/vkfh977ipi

the js code is in test.js, i have completed the code

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

So it's working now, right?

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

Steven 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
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

It'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 />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

Hey 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
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

Maybe you're running on a cached copy from before the changes.

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

Steven Parker Thanks! now its working. I was very close i just didnt figure out the reveal thing which were very simple!