Question

我在这个表单中有一个表单我有一个带有多个选项的select标签检查出来：

<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类。我知道这是错的，但这是我到目前为止所做的。

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

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

＆＃13;

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

＆＃13;

.column{display:none}

＆＃13;

<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>

＆＃13;

Answer 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>

在选项单击上显示隐藏字段

2 个答案: