使用jQuery或JS將div隱藏在不同的下拉選項上

Question

當我從下拉列表中選擇一個選項時，與該選擇相關聯的一組按鈕出現在div（它應該在的位置）。然後，我單擊其中一個導致出現第二個div的按鈕（#info，綠色背景）以及與該按鈕關聯的內容出現在div內（如預期的那樣）。

我的問題是這樣的：

一旦第二個div已經出現，如果我回到最初的下拉列表，選擇不同的選項，我想綠色#info DIV消失，目前它停留可見幷包含與最後一個按鈕關聯的內容，儘管已經選擇了不同的下拉選項。

我會很感激任何人都可以提供幫助！非常感謝您的關注。非常感謝能夠訪問您所有的智能腦。

這裏是我的Fiddle

$(document).ready(function() { 
 
    $("select").change(function() { 
 
    $(this).find("option:selected").each(function() { 
 
     if ($(this).attr("value") == "red") { 
 
     $(".box").not(".red").hide(); 
 
     $(".red").show(); 
 

 
     } else if ($(this).attr("value") == "green") { 
 
     $(".box").not(".green").hide(); 
 
     $(".green").show(); 
 
     } else if ($(this).attr("value") == "blue") { 
 
     $(".box").not(".blue").hide(); 
 
     $(".blue").show(); 
 
     } else { 
 
     $(".box").hide(); 
 
     } 
 
    }); 
 
    }).change(); 
 

 
    $('.buttons button').click(function() { 
 
    $('#info').empty(); 
 
    $('#info').html($("#" + $(this).data('link')).html()); 
 
    }); 
 
});

.box { 
 
    padding: 20px; 
 
    margin-top: 20px; 
 
    border: 1px solid #000; 
 
    width: 200px; 
 
    height: 250px; 
 
    padding: 0px; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
#button-column { 
 
    text-align: center; 
 
    padding: 0px; 
 
} 
 
button { 
 
    font-size: 12px; 
 
    width: 100px; 
 
    height: 30px; 
 
    padding: 10px; 
 
    margin: 15px; 
 
} 
 
#info { 
 
    width: 250px; 
 
    height: 200px; 
 
    float: left; 
 
    display: inline-block; 
 
    text-align: center; 
 
    margin-left: 15px; 
 
    margin-top: 30px; 
 
} 
 
#dropdown { 
 
    width: 200px; 
 
    text-align: center; 
 
} 
 
.box h3 { 
 
    text-align: center; 
 
} 
 
.info { 
 
    background-color: green; 
 
    height: 200px; 
 
    border: 1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dropdown"> 
 
    <h3>I am a...</h3> 
 
    <select> 
 
    <option>Select</option> 
 
    <option value="green">Dinosaur</option> 
 
    <option value="red">Unicorn</option> 
 
    </select> 
 
</div> 
 

 
<div class="green box"> 
 
    <h3>Today I am feeling...</h3> 
 
    <ul id="button-column" style="list-style: none;"> 
 
    <li class="buttons"> 
 
     <button data-link="content">Content</button> 
 
    </li> 
 
    <li class="buttons"> 
 
     <button data-link="mad">Mad</button> 
 
    </li> 
 
    <li class="buttons"> 
 
     <button data-link="hungry">Hungry</button> 
 
    </li> 
 

 
    </ul> 
 

 
</div> 
 

 
<div class="red box"> 
 
    <h3>Today I am feeling...</h3> 
 
    <ul id="button-column" style="list-style: none;"> 
 
    <li class="buttons"> 
 
     <button data-link="shy">Shy</button> 
 
    </li> 
 
    <li class="buttons"> 
 
     <button data-link="curious">Curious</button> 
 
    </li> 
 
    <li class="buttons"> 
 
     <button data-link="sleepy">Sleepy</button> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div id="info"> 
 

 
</div> 
 
<div id="hiddenDivs" style="display:none;"> 
 
    <!-- Dinosaur Select --> 
 
    <div id="content"> 
 
    <div class="info"> 
 
     <h3>Laying in the sun is nice.</h3> 
 
    </div> 
 
    </div> 
 
    <div id="mad"> 
 
    <div class="info"> 
 
     <h3>Go knock some trees over!</h3> 
 
    </div> 
 
    </div> 
 
    <div id="hungry"> 
 
    <div class="info"> 
 
     <h3>Go make a salad!</h3> 
 
    </div> 
 
    </div> 
 
    <!-- Unicorn Select --> 
 
    <div id="shy"> 
 
    <div class="info"> 
 
     <h3>I like to hide in the forest.</h3> 
 
    </div> 
 
    </div> 
 
    <div id="curious"> 
 
    <div class="info"> 
 
     <h3>Wait until everyone is asleep.</h3> 
 
    </div> 
 
    </div> 
 
    <div id="sleepy"> 
 
    <div class="info"> 
 
     <h3>Napping under a shady tree is the best.</h3> 
 
    </div> 
 
    </div>

Answer 1

這裏有一個更新的Fiddle。

您只需隱藏並顯示更改或加載的#info格。

因此，無論何時下拉更改，#info div將hide。然後，如果有人點擊一個按鈕，它將會show。 show()函數將始終運行，但如果多次單擊該按鈕將被忽略。

}); 
    $("#info").hide(); // Hide 
}).change(); 

$('.buttons button').click(function(){ 
    $("#info").show(); // Show 
    $('#info').empty(); 
    $('#info').html($("#" + $(this).data('link')).html()); 
});