javascript - 如何使bootstrap multiselect选项与div id连接 - Thinbug

如何使bootstrap multiselect选项与div id连接

时间：2016-02-17 19:35:06

标签： javascript jquery html twitter-bootstrap

我正在尝试使用bootstrap multiselect创建一个多聚器。我希望下拉列表中的选项与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>

1 个答案:

答案 0 :(得分：1)

我不熟悉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);
});