Mostafa Mohamed Mostafa Mohamed - 5 months ago 16
HTML Question

Multi selection drop down menu

I have a problem in some Html and CSS code that i want to do multi selection drop down menu but i face a problem.

what i want to do is something like that :

i want to do something like that

and what i have done so far is

enter image description here

and here is my Html code :

<div class="btn-group">
<button type="button" class="multiselect dropdown-toggle btn btn-default"
data-toggle="dropdown" title="Columns">
Columns
<b class="caret">
</b>
</button>
<ul class="dropdown-menu">
<li>
<label class="checkbox">

<input type="checkbox" name="multiselect" value="cheese">Cheese</input>

</label>
</li>
<li>
<label class="checkbox">

<input type="checkbox" name="multiselect" value="tomatoes">Tomatoes</input>

</label>
</li>
<li>
<label class="checkbox">

<input type="checkbox" name="multiselect" value="mozarella">Mozzarella</input>

</label>
</li>
<li>
<label class="checkbox">

<input type="checkbox" name="multiselect" value="mushrooms">Mushrooms</input>

</label>
</li>
<li>
<label class="checkbox">

<input type="checkbox" name="multiselect" value="pepperoni">Pepperoni</input>

</label>

</li>
<li>
<label class="checkbox">

<input type="checkbox" name="multiselect" value="onions">Onions</input>

</label>
</li>
</ul>
</div>


and my css code :

ul.dropdown-menu {
height: auto;
width: auto;
}

ul.dropdown-menu li {
height: auto;
width: auto;

}
ul.dropdown-menu li label {
display: block;
padding-left: 40px;
}


My problem is that when i choose any check box input the block disappear and i should open it again to select values !.

i need some help please

Answer

You can try like this

$(document).on('click', '.dropdown-menu', function (e) {
  e.stopPropagation(); // it will not propagate the action to parent for closing
});
Comments