Html 如果使用引导程序选择了某些选项，则隐藏/显示内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18992839/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide/show content if some option is selected with bootstrap
提问by Luis Serrano
How can I show some content if users select one option using select/option tag? I'm using bootstrap and I know how to collapse content but I'm using checkbox's for this or buttons but for this I can't make it work..
如果用户使用 select/option 标签选择一个选项，我如何显示某些内容？我正在使用引导程序，我知道如何折叠内容，但我为此使用了复选框或按钮，但为此我无法使其工作..
Someone knows how to do it?
有人知道怎么做吗？
回答by cssyphus
Bootstrap is built on top of jQuery, so let's use that:
Bootstrap 建立在 jQuery 之上，所以让我们使用它：
- First, we assign an ID to the select control (mystuff)
<select id="mystuff"> - Then, we tell jQuery to watch for the value of that element to change:
$('#mystuff').change(function() { - Next, we grab the value of teh currently selected item:
opt = $(this).val(); - Then, determine which option was selected
if (opt=="opt1"){}//Note that are testing the VALUE, not the text, of the option - Finally, inject some html into the DIV with
id=msgbox$('#msgbox').html('some html code');
- 首先，我们为select控件（mystuff）分配一个ID
<select id="mystuff"> - 然后，我们告诉 jQuery 观察要更改的元素的值：
$('#mystuff').change(function() { - 接下来，我们获取当前选中项的值：
opt = $(this).val(); - 然后，确定选择了哪个选项
if (opt=="opt1"){}//注意正在测试选项的 VALUE，而不是文本 - 最后，将一些 html 注入到 DIV 中
id=msgbox$('#msgbox').html('some html code');
HTML:
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
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.');
}
});
回答by sertmo
you can use collapse from bootstrap:
您可以使用 bootstrap 中的折叠：
HTML:
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
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');
});
if need more code block connect do one select option, only add class "mystaff_hide" and class "mystaff_[option value]"
如果需要更多的代码块连接做一个选择选项，只添加类“mystaff_hide”和类“mystaff_[选项值]”
