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，这样它们就不会与ID冲突DIVs）。另外，从下拉列表的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

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

1 个答案: