can anybody help me on implementing multi select drop down with check box? I have referred below link example. / 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 e from server. Also, drop down list has to refresh every time when server call made and response came for different events/scenarios.
can anybody help me on implementing multi select drop down with check box? I have referred below link example. http://www.codexworld./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 e from server. Also, drop down list has to refresh every time when server call made and response came for different events/scenarios.
Share Improve this question edited Feb 8, 2019 at 22:16 user513951 13.7k7 gold badges70 silver badges89 bronze badges asked Dec 30, 2016 at 13:19 Chakra Pani MarganiChakra Pani Margani 311 gold badge1 silver badge3 bronze badges 3- 1 What you have tried so far??? where is your code – priya_singh Commented Dec 30, 2016 at 13:20
- I believe this has been answered before here – James Moran Commented Dec 30, 2016 at 13:34
- Possible duplicate of jquery multiselect reload – user513951 Commented Feb 8, 2019 at 22:16
3 Answers
Reset to default 1You 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();
}
});
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 ment
<script src='http://cdnjs.cloudflare./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./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./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><select multiple>
/*for without holding ctrl/mand 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./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>