CODEWITHSUNDEEP
javascriptphphtmlcss
Johsh Hanks
Johsh Hanks

Reputation: 147

HTML. Hide/Show a drop down menu depending on if an option is selected on another drop down menu

I am trying to have originally just one drop down menu when a website loads. Lets say that drop down menu only has two options "A" and "B". If the user selects option "A" I want another drop menu then to appear on the website (just below the original). If the user selects option "B" I want a different menu to appear below the original. I am also using PHP to make things even more complicated. Can anyone guide me on how I can accomplish this?

Upvotes: 0

Views: 867

Answers (3)

lindsay
lindsay

Reputation: 972

Here's an example of manipulating the classes using native JavaScript. It could be cleaner, but it shows how you can check agains what classes exist in order to set CSS behaviour.

var cont = document.body.appendChild(document.createElement('div'));
cont.className = 'row';


for (var i = 0; i < 3; i++ ) {
    var menuitem = cont.appendChild(document.createElement('div'));
        menuitem.className = 'col';
    var internal = menuitem.appendChild(document.createElement('div'));
        internal.appendChild(document.createTextNode('item'+ (i + 1)));

(internal.attachEvent) ?
    internal.attachEvent('onclick', function () {
        for (var j = 0; j < cont.children.length; j++){
            if (cont.children[j].className === 'col active') {
                cont.children[j].className = 'col';
            }
        };
        this.parentElement.className = 'col active';
    }) : 
    internal.addEventListener('click', function () {
        for (var j = 0; j < cont.children.length; j++){
            if (cont.children[j].className === 'col active') {
                cont.children[j].className = 'col';
            }
        };
        this.parentElement.className = 'col active';
    }, false);
};

Upvotes: 0

Alex
Alex

Reputation: 478

This should do the work :

$("#drop").change(function() {
    if( $('#drop option:selected').val() == "A") {
        //Do what you want
    }
    else if ( $('#drop option:selected').val() == "B") {
        //Do what you want
    }
});

I don't know your level in js, if you need more explanations, please let me know.

Upvotes: 0

mutt
mutt

Reputation: 793

Modify the two dropdowns with attribute style="display:none". In your javascript function you would have an event registered that based on the SelectedIndex you would choose which dropdown element to remove the style="display:none" from.

Upvotes: 1

Related Questions