单击选项时显示隐藏字段 [英] Show hidden field on option click

问题描述

此表单中有一个表单，我有一个带有多个选项的select标记，请检出:

I have a form inside this form i have a select tag with multiple options check it out:

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

我要实现的目标是，当我单击某个字段时，将显示某个div.在这种情况下，如果我单击字段1，它应该向我显示隐藏的div.

What I'm trying to achieve is when i click on a certain field a certain div will show. In this case if i click on field one it should show me the hidden div.

看看我如何尝试:

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

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

when I click on footerLayout option 1 it should show me the .column-1 class which is hidden. I know this is wrong but this is what i got so far.

如果有人能指出正确的方向，那将很棒.

If anyone could point me in the right direction that'd be awesome.

推荐答案

您可以使用 .val() ，通过字符串串联创建有效的选择器，然后执行所需的操作.由于需要显示隐藏的div，因此需要使用 .show()

You can get the selected value as using .val(), create a valid selector by string concatenation and use perform the desired operation. As you need to display the hidden div, you need to use .show()

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

---

根据评论将来，如果您单击选项2以显示名为.column-2

---

As per comment in the future i want if you click option 2 to show a hidden div named .column-2

我建议您对所有列(例如column)使用通用类，然后再使用 .hide() 与类选择器(".class")

I would recommend, you to use a common class with all the columns like column, then you can use .hide() with 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>

这篇关于单击选项时显示隐藏字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！