html - 如果使用 Bootstrap 选择了某些选项，则隐藏/显示内容

Question

如果用户使用 select/option 标签选择一个选项，我如何显示一些内容？

我正在使用 bootstrap，我知道如何折叠内容，但我为此使用了复选框或按钮，但为此我无法让它工作。

如何做到这一点？

Answer 1

您可以从 Bootstrap 中使用折叠:

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_[option value]”