how to hide form option with jquery

Question

I have the html form:

<select id="selection" name="type">
    <option value="Interior">Interior</option>
    <option value="Music">Music</option>
</select>
<select id="whichvideo" name="vidtype">
    <option value="">Choose video type</option>
    <option value="Youtube">Youtube</option>
    <option value="Vimeo">Vimeo</option>
    <option id="soundcloud1" value="Soundcloud">Soundcloud</option>
</select>

and the jquery:

$("#selection").change(function () {
    if ($(this).find("option:selected").val() === "Music") {
        $("#soundcloud1").show();
    } else {
        $("#soundcloud1").hide();
    }
});

with this Fiddle

Why when I select Music and then return to Interior in the form. Does it not hide the option Soundcloud

possible duplicate of [Hide options in a select list using jQuery](http://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-using-jquery) — martynas, Jun 21 '14 at 19:07
Must be the cross-browser thing in one of the answers below then, because that works fine for me — Tom Prats, Jun 21 '14 at 19:08
This is so unfair that I have downvotes. Please someone explain why I have them!!! This is a perfectly valid question! — maxisme, Jun 21 '14 at 19:16

score 0 · Answer 1 · answered Jun 21 '14 at 19:04

0

This is working fine for me in firefox 30.

Working Fiddle

I have just added jQuery library in the fiddle. Let me know if you are looking for something else.

answered Jun 21 '14 at 19:04

Aamir Shahzad

6,683
8
47
70

@Maximilian works exactly what you want in chrome Version 34.0.1788.0 and firefox 30, the issue see is it not working on page load is that what you want? – Aamir Shahzad Jun 21 '14 at 19:13
As I mentioned I said "Why when I select Music and then **return** to Interior in the form. Does it not hide the option Soundcloud? it does not seem to work so odd – maxisme Jun 21 '14 at 19:14
which version of firefox/chrome you are testing? – Aamir Shahzad Jun 21 '14 at 19:18
Version 35.0.1916.153 – maxisme Jun 21 '14 at 19:18

score 0 · Answer 2 · answered Jun 21 '14 at 19:05

There were a couple problems with your fiddle:

You didn't include jQuery so the JS wasn't working at all.
You have a select in a select

Here's an updated version: http://jsfiddle.net/Xg5gU/3/

<select id="selection" name="type">
    <option value=".......">.......</option>
    <option value="Art">Art</option>
    <option value="Architecture">Architecture</option>
    <option value="Bikes">Bikes</option>
    <option value="Fashion">Fashion</option>
    <option value="Films">Films</option>
    <option value="Food">Food</option>
    <option value="Games">Games</option>
    <option value="Interior">Interior</option>
    <option value="Music">Music</option>
    <option value="Photography">Photography</option>
    <option value="Technology">Technology</option>
    <option value="Video">Video</option>
</select>

<select id="whichvideo" name="vidtype">
    <option value="">Choose video type</option>
    <option value="Youtube">Youtube</option>
    <option value="Vimeo">Vimeo</option>
    <option id="soundcloud" value="Soundcloud">Soundcloud</option>
</select>

$("#selection").change(function () {
    if ($(this).find("option:selected").val() === "Music") {
        $("#soundcloud").show();
    } else {
        $("#soundcloud").hide();
    }
});

score 0 · Answer 3 · edited May 23 '17 at 12:10

You will not get this to work across different browsers. You can store a copy of the select before removal.

More info

DEMO:

Works in Firefox, however Chrome does not support this

$("#selection").change(function () {   
    if ($(this).val() === "Music") {
        $("#whichvideo option[value='Soundcloud']").show();
    } else {       
        $("#whichvideo option[value='Soundcloud']").hide();
    }
});

how to hide form option with jquery

3 Answers3