单击选项时显示隐藏字段答案

【问题标题】：Show hidden field on option click单击选项时显示隐藏字段
【发布时间】：2017-03-08 11:17:54
【问题描述】：

我在这个表单中有一个表单我有一个带有多个选项的选择标签检查它：

<select class="form-control" name="footerLayout">
    <option value="1">1 column</option>
</select>

我想要实现的是，当我单击某个字段时，某个 div 将显示。在这种情况下，如果我单击第一个字段，它应该会显示隐藏的 div。

看看我是怎么尝试的：

$('[name=footerLayout]').click(function() {
    $(".column-1").toggle("slow");
});

当我点击 footerLayout 选项 1 时，它应该向我显示隐藏的 .column-1 类。我知道这是错误的，但这就是我目前所得到的。

如果有人能指出我正确的方向，那就太棒了。

【问题讨论】：

是拼写错误slow 吗？它应该显示。
它会慢慢切换元素@BharatPatidar
有趣，我的问题中的一个问题；p

标签： jquery html css

【解决方案1】：

您可以使用.val() 获取选定的值，通过字符串连接创建一个有效的选择器并使用执行所需的操作。由于需要显示隐藏的div，所以需要使用.show()

$('[name=footerLayout]').change(function() {
    var selector = ".column-" + $(this).val();
    $(selector).show();
});

根据评论 我希望将来如果您单击选项 2 来显示一个名为 .column-2的隐藏 div

我会建议，你使用所有列的公共类，如column，然后你可以使用.hide() 和Class Selector (“.class”)

$('[name=footerLayout]').change(function() {        
    var selector = ".column-" + $(this).val(); //Create selector        
    $(".column").not(selector).hide(); //Hide others        
    $(selector).show();//Show column based on selected value
});

jQuery(function($) {
  $('[name=footerLayout]').change(function() {
    var selector = ".column-" + $(this).val(); //Create selector        
    $(".column").not(selector).hide(); //Hide others        
    $(selector).show(); //Show column based on selected value
  });
});

.column{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="footerLayout">
  <option value="1">1 column</option>
  <option value="2">2 column</option>
</select>

<div class="column column-1">div 1</div>
<div class="column column-2">div 2</div>

【讨论】：

我这样做了，但是当我点击选项 1 时，它没有显示名为“column-1”的隐藏 div
将来我希望如果您单击选项 2 以显示一个名为 .column-2 的隐藏 div
@KevinAartsen，更新了答案，我对之前的评论感到困惑当我点击选项 1 时，它不显示名为“column-1”的隐藏 div，如果它的工作删除（总是无用的）评论
感谢您的宝贵时间，很抱歉造成混乱，但这是我的jsfiddle.net/6zzrczhL
@KevinAartsen jsfiddle.net/mk425srx noitce <div class="column column-1"> 和<div class="column column-2">，我添加了column 类，这样我就可以隐藏所有column

【解决方案2】：

你可以这样做，当点击相应的选项时，它会显示相应的div：

    <style>
        div {
            display: none;
        }
    </style>

    <select class="form-control" name="footerLayout">
        <option value="1">1 column</option>
        <option value="2">2 column</option>
        <option value="3">3 column</option>
    </select>

    <div class="div1">div 1</div>
    <div class="div2">div 2</div>
    <div class="div3">div 3</div>

    <script src="js/jquery.min.js"></script>
    <script>
        $("option").click(function(){
            var num = $(this).val();
            $('.div' + num).show();
        });
    </script>

【讨论】：