How to create checkbox inside dropdown?
Here is a simple dropdown checklist:
var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
}.dropdown-check-list {
display: inline-block;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}<div id="list1" class="dropdown-check-list" tabindex="100">
<span class="anchor">Select Fruits</span>
<ul class="items">
<li><input type="checkbox" />Apple </li>
<li><input type="checkbox" />Orange</li>
<li><input type="checkbox" />Grapes </li>
<li><input type="checkbox" />Berry </li>
<li><input type="checkbox" />Mango </li>
<li><input type="checkbox" />Banana </li>
<li><input type="checkbox" />Tomato</li>
</ul>
</div>How to get Dropdown Menu with Checkboxes
Can easily get from a google search,
Try this
HTML
<br/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="button-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/> Option 1</a></li>
<li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/> Option 2</a></li>
<li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/> Option 3</a></li>
<li><a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox"/> Option 4</a></li>
<li><a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox"/> Option 5</a></li>
<li><a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox"/> Option 6</a></li>
</ul>
</div>
</div>
</div>
</div>
JS
var options = [];
$( '.dropdown-menu a' ).on( 'click', function( event ) {
var $target = $( event.currentTarget ),
val = $target.attr( 'data-value' ),
$inp = $target.find( 'input' ),
idx;
if ( ( idx = options.indexOf( val ) ) > -1 ) {
options.splice( idx, 1 );
setTimeout( function() { $inp.prop( 'checked', false ) }, 0);
} else {
options.push( val );
setTimeout( function() { $inp.prop( 'checked', true ) }, 0);
}
$( event.target ).blur();
console.log( options );
return false;
});
or check this,
How to make checkbox work in dropdown using bootstrapvuejs
You can't add <b-form-checkbox> inside <b-dropdown-item>.
To fix the issue you have to add
<b-form-checkbox>inside<b-dropdown-form>Directly you have to add
<b-form-checkbox>inside<b-dropdown><div id="app">
<b-dropdown
variant="transparent"
text="Split Link"
checkbox-menu
allow-focus>
<template #button-content>
<span>
<font-awesome-icon size="1x" :icon="['fas', 'filter']" />
</span>
</template>
<b-dropdown-form>
<b-form-checkbox
id="checkbox-1"
name="checkbox-1"
value="accepted"
unchecked-value="not_accepted">All
</b-form-checkbox>
<b-form-checkbox
id="checkbox-2"
name="checkbox-2"
value="accepted1"
unchecked-value="not_accepted2">Department
</b-form-checkbox>
</b-dropdown-form>
</b-dropdown>
</div>
Inside <b-dropdown> tag you can add only below mentioned child tags
<b-dropdown-item><b-dropdown-item-text><b-dropdown-divider><b-dropdown-form><b-dropdown-group><b-dropdown-header>
DEMO Link
How to use checkbox inside Dropdown?
this will work for you
bool isChecked=false;
DropdownButtonFormField(
items: [
DropdownMenuItem(
child: Row(
children: <Widget>[
StatefulBuilder(builder:
(BuildContext context,
StateSetter stateSetter) {
return Checkbox(
onChanged: (bool value) {
stateSetter(() {
_isChecked = value;
});
},
value: _isChecked,
);
}),
Text("label"),
Bootstrap putting checkbox in a dropdown
Here's what we'll build:
HTML
Essentially, we'll look to combine two different sets of Bootstrap controls & styles: Dropdowns & Checkboxes. Inside of each li, we'll use a label instead of an a element, so that we can wrap the checkbox in a label and make the entire row clickable.
<ul class="dropdown-menu checkbox-menu allow-focus">
<li >
<label>
<input type="checkbox"> Cheese
</label>
</li>
</ul>
CSS
We can steal some of the styles normally applied to .dropdown-menu li a, input and apply them to our label option instead. We'll make the label occupy the full width of the container and fix some label / checkbox alignment issues. Additionally, we'll add styles for .active and :hover.
.checkbox-menu li label {
display: block;
padding: 3px 10px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
margin:0;
transition: background-color .4s ease;
}
.checkbox-menu li input {
margin: 0px 5px;
top: 2px;
position: relative;
}
.checkbox-menu li.active label {
background-color: #cbcbff;
font-weight:bold;
}
.checkbox-menu li label:hover,
.checkbox-menu li label:focus {
background-color: #f5f5f5;
}
.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
background-color: #b8b8ff;
}
JavaScript
Some other housekeeping, we'll manually keep an .active class flag on each list item to correspond to whether or not the item is checked so we can style it appropriately.
$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
$(this).closest("li").toggleClass("active", this.checked);
});
We'll also want to allow multiple selections by allowing the menu to stay open on internal click events by stopping the event from bubbling up
$(document).on('click', '.allow-focus', function (e) {
e.stopPropagation();
});
Demo in Stack Snippets
$(".checkbox-menu").on("change", "input[type='checkbox']", function() { $(this).closest("li").toggleClass("active", this.checked);});
$(document).on('click', '.allow-focus', function (e) { e.stopPropagation();});body { padding: 15px;}
.checkbox-menu li label { display: block; padding: 3px 10px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap; margin:0; transition: background-color .4s ease;}.checkbox-menu li input { margin: 0px 5px; top: 2px; position: relative;}
.checkbox-menu li.active label { background-color: #cbcbff; font-weight:bold;}
.checkbox-menu li label:hover,.checkbox-menu li label:focus { background-color: #f5f5f5;}
.checkbox-menu li.active label:hover,.checkbox-menu li.active label:focus { background-color: #b8b8ff;}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span> </button> <ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1"> <li > <label> <input type="checkbox"> Cheese </label> </li> <li > <label> <input type="checkbox"> Pepperoni </label> </li> <li > <label> <input type="checkbox"> Peppers </label> </li> </ul></div>How to add checkbox checked items in Dropdown/selectlist list
According to your description, I suggest you could try to add the select options by using jquery.
More details, you could refer to below codes:
<table>
@for (int j = 0; j < Model.Currency.Count(); j++)
{
<tr>
<td>
@Html.CheckBoxFor(m => m.Currency[j].Checked, new { @class = "ckbox" })
</td>
<td>
@Html.DisplayFor(m => m.Currency[j].Name)
@Html.HiddenFor(m => m.Currency[j].Id)
@Html.HiddenFor(m => m.Currency[j].Name)
</td>
</tr>
}
</table>
<div class="col-5">
<select id="Default_Currency"
class="form-control">
</select>
</div>
@section scripts{
<script type="text/javascript">
$(
function () {
$(".ckbox").each(function () {
var selectedtext = ($(this).parent().next().text());
if ($(this).is(':checked')) {
$("#Default_Currency").append('<option value="' + selectedtext + '">' + selectedtext + '</option>');
} else {
$('option[value*="' + selectedtext + '"]').remove();
}
});
});
$(".ckbox").change(function (e) {
var selectedtext = ($(this).parent().next().text());
if ($(this).is(':checked')) {
$("#Default_Currency").append('<option value="' + selectedtext + '">' + selectedtext + '</option>');
} else {
$('option[value*="' + selectedtext + '"]').remove();
}
});
</script>
}
Result:
Related Topics
How Does 'Array.Prototype.Slice.Call' Work
What's a Good Way to Extend Error in JavaScript
How to Custom-Format the Autocomplete Plug-In Results
Jquery's .Click - Pass Parameters to User Function
Javascript/Jquery to Download File via Post with JSON Data
What Does ':' (Colon) Do in JavaScript
JavaScript "This" Pointer Within Nested Function
How to Check If an HTML Element Is Empty Using Jquery
Pick Random Property from a JavaScript Object
Which Is Better: <Script Type="Text/Javascript">...</Script> or <Script>...</Script>
Google Maps API V3: Infowindow Not Sizing Correctly
How to Clear Cache of Service Worker
JavaScript Checking for Null VS. Undefined and Difference Between == and ===