如果用户使用选择/选项标签选择一个选项,我如何显示一些内容?我正在使用引导程序,并且我知道如何折叠内容,但是我为此使用复选框或按钮,但为此我无法使其工作..
有人知道怎么做吗?
如果用户使用选择/选项标签选择一个选项,我如何显示一些内容?我正在使用引导程序,并且我知道如何折叠内容,但是我为此使用复选框或按钮,但为此我无法使其工作..
有人知道怎么做吗?
您可以从引导程序中使用折叠:
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_[选项值]”
Bootstrap 建立在 jQuery 之上,所以让我们使用它:
<select id="mystuff">
$('#mystuff').change(function() {
opt = $(this).val();
if (opt=="opt1"){}
//注意正在测试选项的 VALUE,而不是文本id=msgbox
$('#msgbox').html('some html code');
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.');
}
});