Pashuk xCode Pashuk xCode - 2 years ago 139
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>
</select>
<div class="btn-group">
<button type="button" class="multiselect dropdown-toggle btn btn-
default"
data-toggle="dropdown" title="Abon, Client" aria-expanded="false">
<span class="multiselect-selected-text">Abon, Client</span>
<b class="caret"></b>
</button>
<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
All</label>
</a>
</li>
<li>


Full code here:
http://jsfiddle.net/w7aakdbb/1170/

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()
    console.log(selected);
    $("#menu-2>li").hide();
    $("#menu-2").find("li[data-value='abon']").show();
  });
});

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)

https://jsfiddle.net/princesodhi/8kfyd7ec/1/

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