时间戳

首页 > 解决方案 > Bootstrap-multiselect 显示隐藏 div 元素

javascript - Bootstrap-multiselect 显示隐藏 div 元素

问题描述

我正在为我的任务使用bootstrap-multiselect来显示基于多个选中复选框的隐藏动态 div 元素。我在这里找到的 StackOverflow 问题仅公开了如何基于选定的多选而不是 div 显示隐藏多选。

HTML 代码：

<select id="one" multiple="multiple">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="two" multiple="multiple">
  <option data-group="1" value="OneA" disabled>One A</option>
  <option data-group="1" value="OneB" disabled>One B</option>
  <option data-group="2" value="TwoA" disabled>Two A</option>
  <option data-group="2" value="TwoB" disabled>Two B</option>
  <option data-group="3" value="ThreeA" disabled>Three A</option>
</select>

JavaScript 代码：

$(document).ready(function() {
  $('#one').multiselect({
    onChange: function(element, checked) {
      var opts = $('*[data-group="' + element.val() + '"]');
      console.log(opts);
      if (checked === true) {
        opts.prop('disabled', false).prop('selected', false);
      } else if (checked === false) {
        opts.prop('disabled', true).prop('selected', false);
      }
      $("#two").multiselect('refresh');
    }
  });
  $('#two').multiselect();
});

此外，我是 bootstrap 和 jQuery 的初学者。有人可以帮我解决这个问题吗？谢谢你。

标签： javascriptjquerytwitter-bootstrapmulti-selectbootstrap-multiselect

解决方案

这很容易实现。

例如，在上面指出的 html 代码中添加以下 Div：

<div data-group="1">data-group="1"</div>
<div data-group="2">data-group="2"</div>
<div data-group="2">data-group="2"</div>
<div data-group="3">data-group="3"</div>
<div data-group="3">data-group="3"</div>

并且可以使用以下方法轻松管理 js 中 Div 的隐藏/显示：

opts.css({'display':'none'}); // 隐藏

opts.css({'display':'block'}); // 以显示

<script>
    $(document).ready(function() {
        $('#one').multiselect({
            onChange: function(element, checked) {
                var opts = $('*[data-group="' + element.val() + '"]');
                console.log(opts);
                if (checked === true) {
                    opts.prop('disabled', false).prop('selected', false);
                    opts.css({'display':'block'});
                } else if (checked === false) {
                    opts.prop('disabled', true).prop('selected', false);
                    opts.css({'display':'none'});
                }
                $("#two").multiselect('refresh');
            }
        });
        $('#two').multiselect();
    });

</script>

您可以根据需要自定义它。例如，您可能需要更改data-group 为myDiv-groupfor div 元素并相应地修改 javascript。

希望这有帮助:)

推荐阅读