Pashuk xCode Pashuk xCode -3 years ago 171
HTML Question

How to display(block/none) second menu depending on first using bootstrap multiselect

I have two menus like that.
If I select Abon in the first Menu. It should display all li elements under the Abon optgroup(Abon-1, Abon-2) if I uncheck block in the second menu should be disapeared.
Select and options are my code. And another code is generated by bootstrap multiselect(li, input checkbox, and so on)

<!-- first common -->
<span class="multiselect-native-select">
<select name="emp_sel9[]" id="my_select_descr" multiple="multiple">
<option value="-1">All</option>
<option value="1" style="padding-left: 15px;">Abon</option>
<option value="2" style="padding-left: 15px;">Client</option>
<div class="btn-group">
<button type="button" class="multiselect dropdown-toggle btn btn-
data-toggle="dropdown" title="Abon, Client" aria-expanded="false">
<span class="multiselect-selected-text">Abon, Client</span>
<b class="caret"></b>
<ul class="multiselect-container dropdown-menu">
<li class="multiselect-item multiselect-all">
<a tabindex="0" class="multiselect-all">
<label class="checkbox">
<input type="checkbox" value="multiselect-all">Select

Full code here:

I have an idea to search elements using find, children and sublings...But get stacked with it.

Answer Source

I just give you hint how to fix it.

Get the checked element and show it in dropdown 2.

$(document).ready(function() {
  $("#menu-1>li").on("click", function() {
    var selected = $(this).text()

this example is working when you select abon you can improve it more. (or I will update it but later. I will make it more dynamic with checkbox selection, not text)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download