Navyah Navyah - 5 months ago 103
jQuery Question

MultiSelect dropdown with checkbox slection using pure javascript

I am trying to create a dropdown with multi-select check box manually using pure java script.

I don't want to use any built in libraries. I tried implementing the functionality but the issue is, when I select the check boxes, the data will be poped up in input field, if I click for the second time, I can see that checkboxes are unchecked and data is not appending to previous one.

Please tell me where i went wrong in the code.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style>
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
#presentationTable {
display: none;
border: 1px #dadada solid;
}
#presentationTable label {
display: block;
}
#presentationTable label:hover {
background-color: #1e90ff;
}
</style>

</head>

<body>
<form>
<div class="multiselect">
<div class="selectBox" onClick="showCheckboxes()">
<input type="text" id="presentatioonTableimputValue"><img src="http://siged.sep.gob.mx/analytics/res/s_blafp/uicomponents/obips.CommonIconSets/dropdownfilled_en_choicelistmulti.png" />
<div class="overSelect"></div>
</div>
<div id="presentationTable"> </div>
</div>
</form>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
var expanded = false;
function showCheckboxes()
{
var abc = '<label><input type="checkbox" id="one" value="1"/>First1 checkbox</label> <label><input type="checkbox" id="two" value="two"/>Second checkbox </label> <label><input type="checkbox" id="three" value="three"/>Third checkbox</label>';
$('#presentationTable').html(abc);
if (!expanded) {
$('#presentationTable').show();
expanded = true;
} else {
$('#presentationTable').hide();
expanded = false;
}
}


function updateTextArea()
{
var allVals = [];
$('#presentationTable :checked').each(function () {
allVals.push($(this).val());
});
$('#presentatioonTableimputValue').val(allVals);
}

$(document).click(function(event){
var $trigger = $(".multiselect");
if($trigger !== event.target && !$trigger.has(event.target).length){
$("#presentationTable").slideUp("fast");

updateTextArea();
}
});
</script>
</body>
</html>

Answer

Try this:

JS

var expanded = false;
populateCheckbox();
function populateCheckbox(){
    var abc = '<label><input type="checkbox" id="one" value="1"/>First1   checkbox</label> <label><input type="checkbox" id="two" value="two"/>Second checkbox </label> <label><input type="checkbox" id="three" value="three"/>Third checkbox</label>';
    $('#presentationTable').html(abc);
}
function showCheckboxes()
 {

            if (!expanded) {
                $('#presentationTable').show();
                expanded = true;
            } else {
                $('#presentationTable').hide();           
                expanded = false;
            }       
} 


function updateTextArea() 
{
        var allVals = [];
        $('#presentationTable :checked').each(function () {
           allVals.push($(this).val());
        });
        $('#presentatioonTableimputValue').val(allVals);

    }
$("#presentationTable label input").click(function(){
    updateTextArea();
});
 $(document).click(function(event){
    var $trigger = $(".multiselect");
    if($trigger !== event.target && !$trigger.has(event.target).length){
        $("#presentationTable").slideUp("fast");

        // updateTextArea();
    }           
});   

Each time when you click on the input field, it is creating new checkboxes, That was the issue. hope it will solve your problem.

Comments