Using jquery to hide/show select values

Thanks for the ideas, Tyler and Devin! I didn't realize opt groups could be individually hidden, but it works well. First I gave all optgroups an attribute of "data-category" that matches the categories in the category dropdown.

<optgroup label="Books" data-category="Books">

Then the change event in the category dropdown fires this function:

function selectCategory(el) {
    // get the category
    var c = $(el).val();
    $('[data-category]').each(function() {
        var $this = $(this);
        // 'show' only optgroup categories that match
        $this[($this.attr('data-category') === c ? 'show' : 'hide')]();
    });
    // reset any previously-selected dropdowns
    $('#genre, #format').val('');
}

Kind of cryptic syntax for calling show/hide methods if you're not used to it, but I like the compressed format.

Hey Jason,

Yes the html is the same, other than I have added id's to the optgroups.

And yes that's exactly what I'm trying to do.

I've learned that hide/show isn't the best option, but removing it is giving me headaches as well. I'd try setting up a variable, and assigning it the value of removing the ID. So, this works in removing it, but I can't seem to get it to append when I select the category. Same with detach() which is supposed to preserve the data.

Going a little crazy over this, because I know it's righttt at my fingertips haha

Thank you for this post. It helped me find my own answer to this question, since the codepen posted here didn't work for my site. The main difference is I used show() and hide() instead of remove() and append(), and I used a switch statement instead of multiple if statements. Now it works for both the format and genre dropdowns. My results will probably be on my github soon.

I've created a simple "ready to use" solution for "PHP people" who don't want to mess with JavaScript courses just yet but do want to change this form based on a selection.

Just follow the instructions:

1. Create a folder named "js" in your project directory;
2. Download jQuery https://code.jquery.com/jquery-3.2.1.min.js and put it in the "js" folder;
3. In "js" folder create a new JavaScript file named "form.js";
4. Remove all the options you created in this lesson from "format" and "genre" selectors in your "suggest.php" file;
5. Add "disabled" property to "format" and "genre" selectors, they should look like this: <select id="format" name="format" disabled> <option value="">Select One</option> </select> <select name="genre" id="genre" disabled> <option value="">Select One</option> </select>
6. Connect your js files to the "suggest.php" file: Just add these lines at the bottom of the page before the footer: <script src="js/jquery-3.2.1.min.js"></script> <script src="js/form.js"></script>
7. Paste this code in your "form.js" file and don't forget to save it:

const format = { Books: [ 'Audio', 'Ebook', 'Hardback', 'Paperback', ], Movies: [ 'Blu-ray', 'DVD', 'Streaming', 'VHS', ], Music: [ 'Cassette', 'CD', 'MP3', 'Vinyl', ], };

const genre = { Books: [ 'Action', 'Adventure', 'Comedy', 'Fantasy', 'Historical', 'Historical Fiction', 'Horror', 'Magical Realism', 'Mystery', 'Paranoid', 'Philosophical', 'Political', 'Romance', 'Saga', 'Satire', 'Sci-Fi', 'Tech', 'Thriller', 'Urban', ], Movies: [ 'Action', 'Adventure', 'Animation', 'Biography', 'Comedy', 'Crime', 'Documentary', 'Drama', 'Family', 'Fantasy', 'Film-Noir', 'History', 'Horror', 'Musical', 'Mystery', 'Romance', 'Sci-Fi', 'Sport', 'Thriller', 'War', 'Western', ], Music: [ 'Alternative', 'Blues', 'Classical', 'Country', 'Dance', 'Easy Listening', 'Electronic', 'Folk', 'Hip Hop/Rap', 'Inspirational/Gospel', 'Jazz', 'Latin', 'New Age', 'Opera', 'Pop', 'R&B/Soul', 'Reggae', 'Rock', ], };

const categorySelector = $('#category');

function changeOptions(selector, category) { if (category) { if (selector.attr('disabled')) selector.removeAttr('disabled'); selector.html('<option value="">Select One</option>'); eval(selector.attr('name'))[category].forEach( value => selector.append(<option value="${value}">${value}</option>) ); } else { selector.html('<option value="">Select One</option>'); selector.attr('disabled', true); } }

categorySelector.change( (event) => { const category = $(event.target).val(); changeOptions($('#format'), category); changeOptions($('#genre'), category); });

That's it. ...should work!