jQueryまたはJSを使用して別のドロップダウン選択でdivを非表示にする

Question

ドロップダウンからオプションを選択すると、その選択に関連付けられたボタンのセットがdivに表示されます。次に、それらのボタンの1つをクリックすると、2番目の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 divを非表示にして表示するだけで済みます。

いつでもドロップダウンが変更されるので、その#info divはhideになります。そして、誰かがボタンをクリックすると、それはshowになります。そのshow()関数は常に実行されますが、ボタンを複数回クリックすると無視されます。

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

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