在Select上显示/隐藏Div(长列表)

Show/Hide Div (a long list) on Select

本文关键字：列表 Div 隐藏 Select 显示      更新时间：2023-09-26

在stackoverflow中有许多显示/隐藏选择的解决方案，当选择和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>

我需要能够显示一个DIV选择和隐藏其余的。

更新问题

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

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

上面没有工作，让我猜测，我可能需要一个新的功能，请帮助。

谢谢Brijesh .

你可以这样做，

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

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

小提琴

另一个可能的解决方案是给div元素一个data-attribute。然后根据选择显示适当的div

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

根据您的注释

，因为您已经定义了关系。div的ID与select的value相同

可以像

一样使用

<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();
});
演示

将它们全部隐藏，然后显示具有选择事件的id = value的那个

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