javascript - 单击 html 选择选项时显示相关的 div

Question

我希望一个 div 在其相应的选择选项被点击时变得可见(并隐藏其他选项)不幸的是我对 JavaScript 的尝试很糟糕。

CSS

#aaa, #bbb, #ccc {
    display:none;
}

HTML(我对选项和 div 使用相同的 ID 名称 - 这不正确吗？)

<select>
  <option>Select</option>
  <option id="aaa" value="aaa" onclick="showExtra(this)">AAA</option>
  <option id="bbb" value="bbb" onclick="showExtra(this)">BBB</option>
  <option id="ccc" value="ccc" onclick="showExtra(this)">CCC</option>
</select>

<div id="aaa">
  <p>AAA is aaamazing</p>
</div>
<div id="bbb">
  <p>BBB is bbbriliant</p>
</div>
  <div id="ccc">
<p>cccor blimey CCC</p>
</div>

JavaScript

function showExtra(element)
{
   I don't have clue .slideToggle("medium");
}

Answer 1

去掉<option>中的ID元素，则不需要它们(或者如果需要，您需要重命名它们，例如 optaaa ，这样它们就不会与 DIV 的 ID 冲突)。此外，从下拉菜单的 onchange 中调用函数事件，而不是点击选项。

<select onchange="showExtra(this)">
  <option>Select</option>
  <option value="aaa">AAA</option>
  <option value="bbb">BBB</option>
  <option value="ccc">CCC</option>
</select>

给你所有的 DIV 一个类，这样你就可以将它们作为一个组来操作:

<div id="aaa" class="tab">
  <p>AAA is aaamazing</p>
</div>
<div id="bbb" class="tab">
  <p>BBB is bbbriliant</p>
</div>
  <div id="ccc" class="tab">
<p>cccor blimey CCC</p>
</div>

在 JS 中，您可以对所有匹配或不匹配该值的 DIV 进行操作。

function showExtra(option) {
    var divID = option.value;
    $(".tab:not(#"+divID+")").slideUp();
    $(".tab#"+divID).slideDown();
}

DEMO