can anybody help me on implementing multi select drop down with check box? I have referred below link example. http://www.codexworld.com/multi-select-dropdown-list-with-checkbox-jquery/ Problem with the sample provided above is only hard coded options are populating in the dropdown. I need it an empty drop down when page load. option will be assigned based on Ajax call response data i.e dynamically list will come from server. Also, drop down list has to refresh every time when server call made and response came for different events/scenarios.
-
1What you have tried so far??? where is your codepriya_singh– priya_singh2016-12-30 13:20:19 +00:00Commented Dec 30, 2016 at 13:20
-
I believe this has been answered before hereJames Moran– James Moran2016-12-30 13:34:28 +00:00Commented Dec 30, 2016 at 13:34
-
Possible duplicate of jquery multiselect reloaduser513951– user5139512019-02-08 22:16:35 +00:00Commented Feb 8, 2019 at 22:16
Add a comment
|
3 Answers
You can try bellow sample code as startup:
<select id="ddlId"></select>
$.ajax({
url: 'apiurl',
type: 'GET',
dataType: 'json',
success: function(data) {
var dataObj=JSON.parse(data);
var optionHtml="";
for(var i=0;i<dataObj.length;i++){
optionHtml+='<option value="'+dataObj[i].ValueField+'">'+dataObj[i].TextField+'</option>';
}
$("#ddlId").html(optionHtml);
$('#ddlId').multiselect();
}
});
Comments
You can follow below code and get multi-select drop down with checkbox using jquery / ajax. additionally you should add jquery to work on this program.if you have any question regarding this please comment
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
var expanded = false;
function showCheckBoxes(){
var checkboxes = document.getElementById("checkboxes");
if(!expanded){
checkboxes.style.display = "block";
expanded = true;
}else{
checkboxes.style.display = "none";
expanded = false;
}
}
</script>
<script>
function getcategory() {
$.ajax({
type: "GET",
url: 'https://jsonplaceholder.typicode.com/posts',
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function (data) {
var checkboxes = document.getElementById("checkboxes");
for (var i = 0; i < data.length; i++) {
var node = document.createElement('div');
node.innerHTML = '<label id="'+ data[i].id +'"><input type="checkbox" id="'+ data[i].id +'"/>'+data[i].id +'</label>';
document.getElementById('checkboxes').appendChild(node);
}
},
error: function (msg) {
alert("error" + msg);
}
});
}
</script> <style>
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
#checkboxes{
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color : #1e90ff;
}
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body onload="getcategory();">
<div>
<div class="multiselect">
<div class="selectbox" onclick="showCheckBoxes()">
<select>
<option>Select option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
</div>
</div>
</div>
</body>
</html>
Comments
<select multiple>
/*for without holding ctrl/command key*/
$('option').mousedown(function(e) {
e.preventDefault();
var originalScrollTop = $(this).parent().scrollTop();
console.log(originalScrollTop);
$(this).prop('selected', $(this).prop('selected') ? false : true);
var self = this;
$(this).parent().focus();
setTimeout(function() {
$(self).parent().scrollTop(originalScrollTop);
}, 0);
return false;
});select {
width: 400px;
padding: 8px 16px;
}
select option {
font-size: 14px;
padding: 8px 8px 8px 28px;
position: relative;
color: #999;
}
select option:before {
content: "";
position: absolute;
height: 18px;
width: 18px;
top: 0;
bottom: 0;
margin: auto;
left: 0px;
border: 1px solid #ccc;
border-radius: 2px;
z-index: 1;
}
select option:checked:after {
content: attr(title);
background: #fff;
color: black;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 8px 8px 8px 28px;
border: none;
}
select option:checked:before {
border-color: blue;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMC42MSA4LjQ4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzNlODhmYTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkFzc2V0IDg8L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJfMSIgZGF0YS1uYW1lPSIxIj48cmVjdCBjbGFzcz0iY2xzLTEiIHg9Ii0wLjAzIiB5PSI1LjAxIiB3aWR0aD0iNSIgaGVpZ2h0PSIyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Ljk3IDAuMDEpIHJvdGF0ZSg0NSkiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjUuMzYiIHk9Ii0wLjc2IiB3aWR0aD0iMiIgaGVpZ2h0PSIxMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC44NiAtMy4yNikgcm90YXRlKDQ1KSIvPjwvZz48L2c+PC9zdmc+);
background-size: 10px;
background-repeat: no-repeat;
background-position: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
<option title="Option 1">Option 1</option>
<option title="Option 2">Option 2</option>
<option title="Option 3">Option 3</option>
<option title="Option 4">Option 4</option>
<option title="Option 5">Option 5</option>
<option title="Option 6">Option 6</option>
<option title="Option 7">Option 7</option>
<option title="Option 8">Option 8</option>
<option title="Option 9">Option 9</option>
<option title="Option 10">Option 10</option>
<option title="Option 11">Option 11</option>
<option title="Option 12">Option 12</option>
<option title="Option 13">Option 13</option>
<option title="Option 14">Option 14</option>
</select>