javascript - 在 Select 上显示/隐藏 Div(一长串)

Question

在stackoverflow中显示/隐藏select的解决方案有很多，当select和div的数量有限时，几乎所有的解决方案都有帮助。当选择列表真的很长时，我正在寻找一个解决方案，可能超过 40 个并且有相同数量的 div。在这种情况下是否有一种通用的方法来启用显示/隐藏。？但是，如果有关于此的 SO 帖子，请将它们指向我。

这是我的 HTML 结构...

<div class="form-group">
  <label class="col-md-4 control-label" for="changeType">Type of Change</label>
  <div class="col-md-4">
    <select id="changeTypeSelect" name="changeTypeSelect" class="form-control">
    <option value="">--- SELECT ---</option>
      <option value="1">one</option>
      <option value="2">two</option>
      <option value="3">three</option>
      ..
      ...LOT MORE HERE...
      .....

      <option value="2">three</option>
    </select>
  </div>
</div>

<div id="1" class="changeTypeDiv">
<hr>
<h1>ONE</h1>
</div>

<div id="2" class="changeTypeDiv">
<hr>
<h1>TWO</h1>
</div>

...
....LOT MORE HERE.....
...

<div id="3" class="changeTypeDiv">
<hr>
<h1>TWO</h1>
</div>

我需要能够在选择时显示一个 DIV 并隐藏其余部分。

更新问题

如果我有多个选择框，我是否需要复制脚本或编写新函数...这是我尝试做的，但它不起作用。免责声明 - 很明显我对编码没有太多了解 :)

$(function() {
            $(".changeTypeDiv").hide();
            $("#changeTypeSelect").change(function(){
                $(".changeTypeDiv").hide();
                $("#"+$(this).val()).show();
            });

            $(".addGUIdiv").hide();
            $("#addedGUIselect").change(function(){
              $(".addGUIdiv").hide();
              $)"#"+$(this).val()).show();  
            });
        });

以上不起作用..让我猜测，我可能需要一个新功能..请帮忙。

谢谢布里杰什。

Answer 1

你可以这样做，

$(".changeTypeDiv").hide();
$("#changeTypeSelect").change(function() {
    $(".changeTypeDiv").hide();
    $(".changeTypeDiv").eq($(this).val() - 1).show();
});

这里我采用基于索引的选择..

Fiddle

其他可能的解决方案是为 div 元素提供 data-attribute。然后根据选择显示适当的 div。