In this form contains textarea and dropdown field. When I select multiple options from this dropdown that values are show inside this textarea and when i deselect options from dropdown they are removed from textarea except one last value How can i deselect the last value also,The value selected from the field should look decorative how i can be possible. The value inside text box look like this in the sample image attached
var options = [
{"text" : "Option 1","value" : "Value 1"
},
{"text" : "Option 2","value" : "Value 2"
},
{"text" : "Option 3","value" : "Value 3"
},
{"text" : "Option 4","value" : "Value 4"
},
{"text" : "Option 5","value" : "Value 5"
},
{"text" : "Option 6","value" : "Value 6","selected" : true
},
{"text" : "rrrr","value" : "Value 7"
}
];
var selectBox = document.getElementById('multichecks');
for(var i = 0, l = options.length; i < l; i++){
var option = options[i];
selectBox.options.add( new Option(option.text, option.value, option.selected) );
}
$(document).ready(function() {
$('#multichecks').multiselect({
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
filterPlaceholder: 'Search for something...',
onChange: function test(){
document.getElementById('test').value = $('#multichecks').val().join(',')
//document.getElementById('textbox').value = $('#multichecks').val().join(',')
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"><!-- <input type="button" id = "btnAdd" onclick = "AddDropDownList()" value = "Add DropDownList" /> --><hr /><strong>Where Condition :</strong><div class = "newa" id = "newq"><select id = "multichecks" name = "UHG ID" multiple = "multiple" onclick = "test();"></select></div><hr /><div class = "news" id = "newd"><textarea id="test"></textarea></div><hr />