jquery - 单击选项时显示隐藏字段

Question

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

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

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>