Question

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

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

Answer 1

你可以这样做，

data-attribute

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

Fiddle

其他可能的解决方案是给div元素A。然后在选择中显示正确的div accordindg。

Answer 2

隐藏所有这些，然后显示选择事件id = value的那个。

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

Answer 3

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

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

你可以像

一样使用它

HTML 的

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

DEMO

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

更新问题

3 个答案: