HTML。 隐藏/显示下拉菜单，具体取决于是否在另一个下拉菜单中选择了一个选项

Question

我试图在网站加载时原本只有一个下拉菜单。 可以说下拉菜单只有两个选项“ A”和“ B”。 如果用户选择选项“ A”，则我希望另一个放置菜单出现在网站上（仅在原始网站下方）。 如果用户选择选项“ B”，我希望其他菜单出现在原始菜单下方。 我还使用PHP使事情变得更加复杂。 谁能指导我如何实现这一目标？

Answer 1

使用属性style="display:none"修改两个下拉菜单。 在您的javascript函数中，您将注册一个基于SelectedIndex的事件，您将选择从其中删除style="display:none"下拉元素。

Answer 2

这应该做的工作：

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

我不知道您的js水平，如果您需要更多说明，请告诉我。

Answer 3

这是一个使用本机JavaScript处理类的示例。 它可能更干净，但是它显示了如何再次检查存在哪些类以设置CSS行为。

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);
};