我正在尝试使用 Bootstrap 多重选择来创建多重选择。我希望下拉列表中的选项与 div id 连接。例如，当初始化并且用户没有进行任何选择时，“图表1”、“图表2”和“图表3”在网页上被隐藏。如果用户选择选项1和选项3，则会显示“图表1”和“图表3”。
我浏览了这个网站上的教程 http://davidstutz.github.io/bootstrap-multiselect/#getting-started 。我不确定 onChange 函数是否是实现这一目标的函数...如果是，还有其他示例吗？我是 javascript 和 jquery 的新手。阅读该网站后我仍然不知道如何做。如果您能给我更多线索，请感激!!
下面的代码是我到目前为止所拥有的。
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- MultiSelect -->
<link rel="stylesheet" href="bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript" src="bootstrap-multiselect.js"></script>
<!-- Twitter Bootstrap -->
<link rel="stylesheet" href="bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script ttype="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>
<div align="center" id="multiselect" multiple = "multiple" style = "display: none;">
</div>
<div id="chartId1">
<b>'chart 1'</b>
</div>
<div id="chartId2">
<b>'chart 2'</b>
</div>
<div id="chartId3">
<b>'chart 3'</b>
</div>
<script>
function InitMultiselect(){
var multiOptions = [
{label: 'Option 1', value: '1'},
{label: 'Option 2', value: '2'},
{label: 'Option 3', value: '3'}
];
$(document).ready(function() {
$('#multiselect'). multiselect('dataprovider', multiOptions);
});
}
InitMultiselect()
</script>
</body>
</html>
最佳答案
我不熟悉 Bootstrap 或特定插件，但根据该网站上的教程，我认为您正在寻找类似的东西。
我制作了一个 JSFiddle，但它包含该自定义插件的 JavaScript 和 CSS，因此它可能看起来有点令人困惑:https://jsfiddle.net/8qr4dtLy/1/
HTML
<select id="multiselect" multiple="multiple"></select>
<div id="chartId1">
<b>'chart 1'</b>
</div>
<div id="chartId2">
<b>'chart 2'</b>
</div>
<div id="chartId3">
<b>'chart 3'</b>
</div>
CSS
#chartId1,
#chartId2,
#chartId3
{
display: none;
}
JavaScript
$(document).ready(function()
{
var multiOptions = [
{
label: 'Option 1',
title: 'Option 1',
value: '1'
},
{
label: 'Option 2',
title: 'Option 2',
value: '2'
},
{
label: 'Option 3',
title: 'Option 3',
value: '3'
}];
$('#multiselect').multiselect({
onChange: function(option, checked, select)
{
var $element = $(option),
value = $element.val(),
divId = '#chartId' + value;
$(divId).toggle($element.is(':selected'));
}
});
$('#multiselect').multiselect('dataprovider', multiOptions);
});
关于javascript - 如何使 bootstrap 多选选项与 div id 连接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35466061/