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