Display an element upon Selecting a Drop-Down Item

0
votes

I have a question. I am trying to create a theme for Genesis Framework. I am having trouble with one Element.

I have two drop down lists. But I only Want the Second one to appear when A specific item is selected from the First Drop-down List. Consider this is the first drop down list.

<select name="jquery_box" id="jquery_box"> <option value="">None</option> <option value="fancybox">Fancybox</option> <option value="colorbox">Colorbox</option> </select>

Now I want A Second Drop-down list to appear but only when I have selected the the Third option in the first drown down menu. "Colorbox"

I am doing something with PHP and It is working too but it does not work in real-time. It only works when I select the third option save the settings and the page refreshes. I need some JavaScript solution for it to Appear on selecting third option with value="colorbox" and disappear if another Option is selected.

Please I will be very grateful if you help me thanks.

1
javascriptjqueryhtmlwordpressdrop-down-menu

1 Answers

1
votes

You can do like this:

$('#jquery_box').change(function() {
    if(this.value == "colorbox") {
        $('#second_select').show();
    } else {
        $('#second_select').hide();
    }
});

Fiddle Demo

or shorten above code using .toggle():

$('#jquery_box').change(function () {
    $('#second_select').toggle(this.value == "colorbox");
});

Fiddle Demo