如果使用引导程序选择了某些选项，则隐藏/显示内容答案

【问题标题】：Hide/show content if some option is selected with bootstrap如果使用引导程序选择了某些选项，则隐藏/显示内容
【发布时间】：2013-09-30 07:58:07
【问题描述】：

如果用户使用选择/选项标签选择一个选项，我如何显示一些内容？我正在使用引导程序，我知道如何折叠内容，但我为此使用复选框或按钮，但为此我无法使其工作..

有人知道怎么做吗？

【问题讨论】：

这可以解决你的问题stackoverflow.com/questions/835259/…
是的，我正在使用 jquery 调用类的 .collapse 函数..
优秀。如果有其他问题，请参阅我的回答并发表评论。请记住对所有对您有帮助的帖子进行投票，并在完成后选择正确答案以关闭问题（您也可以同时进行这两项操作）。
Speedysnail6 解决。谢谢大家！

标签： html css twitter-bootstrap hide collapse

【解决方案1】：

Bootstrap 建立在 jQuery 之上，所以让我们使用它：

首先，我们为选择控件分配一个 ID (mystuff)
<select id="mystuff">
然后，我们告诉 jQuery 观察该元素的值是否发生变化：
$('#mystuff').change(function() {
接下来，我们获取当前选中项的值：
opt = $(this).val();
然后，确定选择了哪个选项
if (opt=="opt1"){} //注意是测试选项的VALUE，而不是文本
最后，用id=msgbox将一些html注入DIV
$('#msgbox').html('some html code');

Working jsFiddle example

HTML：

<select id="mystuff">
   <option value="0">-- Choose One --</option>       
   <option value="opt1">House</option>
   <option value="opt2">Car</option>
   <option value="opt3">Bicycle</option>
</select>

<div id="msgbox"></div>

javascript/jquery

$('#mystuff').change(function() {
    opt = $(this).val();
    if (opt=="opt1") {
        $('#msgbox').html('<h2>My House</h2>I have a large house on a quiet street');
    }else if (opt == "opt2") {
        $('#msgbox').html('<h2>My Car</h2>I drive an Audi A200');
    }else if (opt == "opt3") {
        $('#msgbox').html('<h2>My Bicycle</h2>I do not need a bicycle, I have a car.');
    }
});

【讨论】：

这正是我所需要的。我很高兴您发布了一个引导示例。

【解决方案2】：

您可以从引导程序中使用折叠：

HTML：

<select id="mystuff">
   <option value="0">-- Choose One --</option>       
   <option value="opt1">House</option>
   <option value="opt2">Car</option>
   <option value="opt3">Bicycle</option>
</select>

<div class="mystaff_hide mystaff_opt1">
    some content to show on option House selected
</div>
<div class="mystaff_hide mystaff_opt2">
    some content to show on option Car selected
</div>
<div class="mystaff_hide mystaff_opt3">
    some content to show on option Bicycle selected
</div>

javascript/jquery

//add collapse to all tags hiden and showed by select mystuff
$('.mystaff_hide').addClass('collapse');

//on change hide all divs linked to select and show only linked to selected option
$('#mystuff').change(function(){
    //Saves in a variable the wanted div
    var selector = '.mystaff_' + $(this).val();

    //hide all elements
    $('.mystaff_hide').collapse('hide');

    //show only element connected to selected option
    $(selector).collapse('show');
});

如果需要更多的代码块连接做一个选择选项，只添加类“mystaff_hide”和类“mystaff_[选项值]”

【讨论】：