Javascript 选择时显示/隐藏Div（长列表）

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

这是我的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>

以上操作不起作用。让我猜，我可能需要一个新函数。请帮助

谢谢 Brijesh.

你可以这样做

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

在这里，我选择了基于索引的选择

---

另一种可能的解决方案是为div元素提供一个

数据属性

。然后根据所选内容显示正确的div。

隐藏所有div，然后显示select事件中id=value的div

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

---

您需要在所选值和div之间创建一个关系

根据您的评论，因为您已经定义了关系ID与select的

value

相同

你可以像这样使用它

HTML

---

select和div之间有关系吗？请您澄清一下，关系是什么意思？当对应的select选项为selection时，select后的div应该出现。ID必须是唯一的，并且您需要在所选值和div之间创建一个关系。然后使用该关系如果我选择第一个选项，则必须显示哪个div？谢谢satpal，我会解决这个问题。但是我真正的问题是关于一个基于选择选项显示/隐藏div的通用解决方案。Anoop，当你打开页面时，所有div都是可见的，它们div应该只在选择时可见…@bbh你是喀拉拉邦人吗？是的，我是。你好吗？很好，你合适的位置在哪里？嘿，阿努普，我来自PGT，但我不知道stackoverflow的规则，所以不确定我们是否可以在这里讨论非主题项目…@bbh，很高兴我能帮忙：）嗨，萨帕尔，你能帮我更新问题吗…提前谢谢。我有3到4个Div，每个Div有2个选择列表。@bbh，这可能会对您有所帮助，在这里我使用了类选择器。请注意Select抱歉类，html构造是错误的，我已经正确地更新了它。问题是，第二个列表及其div位于div中，只有在主div可见时才会出现。

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

<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>
</select>
<div id="1" class="changeTypeDiv">
    <h1>ONE</h1>
</div>

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