使用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 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());
});