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

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];
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;
    if(selected === "Books") { = "hidden"; = "hidden"; = "hidden"; = "hidden";

    } else if(selected === "Movies") { = "hidden"; "hidden"; = "hidden"; "hidden";


The php code:

                    <th><label for="category">Category</label></th>
                        <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>


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
207,538 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.

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
207,538 Points

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

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

Steven Parker this is the snapshot:

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

Steven Parker
Steven Parker
207,538 Points

So it's working now, right?

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
207,538 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":
   = "none";
   = "none";
   = "none";
   = "none";
   = "";            // reveal the music choices
   = "";       // ''

You'd of course need to do the same with the other categories.

Hey steven this is working somehow on workspaces snapshot:

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
207,538 Points

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

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