Bootstrap-multiselect show hide div elements

Question

I am using bootstrap-multiselect for my task to show hide dynamic div's element based on multiple selected checkboxes. The StackOverflow question I found here is only exposed about how to show hide multiselect based on selected multiselect, not div.

HTML code :

<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 code:

$(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();
});

Besides, I am a beginner on bootstrap and jQuery. Could someone help me how to solve this issue please. Thank you.

Where is your div elements? – Mr. Perfectionist Aug 25 '19 at 04:22 — Mr. Perfectionist, Aug 25 '19 at 04:22

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

This can be easily achieved.

For instance, add following Divs along your html code indicated above:

<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>

and can easily manage Hide/Show of Divs in your js using:

opts.css({'display':'none'}); // to hide

opts.css({'display':'block'}); // to show

<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>

You may customize it as you wish. e.g., you may need to change data-group to myDiv-group for div elements and modify the javascript accordingly.

Hope this helped :)

I have tried your answer but the selected div is hidden instead of showing, here my fiddle https://jsfiddle.net/Lordrauf/6mjozbhu/15/ — Lordrauf, Aug 25 '19 at 11:07

Bootstrap-multiselect show hide div elements

1 Answers1