I have a problem to show multiple select dropdown with checkboxes value in the text.
Below is sample code:
<html>
<body>
<select id="mySelect" multiple class="form-control" onchange="myFunction()">
<option value="" selected>Sila Pilih</option>
<option value="Kakitangan MPK">Kakitangan MPK</option>
<option value="Ahli Majlis">Ahli Majlis</option>
</select>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
$('select[multiple]').multiselect({
columns: 4,
placeholder: 'Select options'
});
</script>
</body>
</html>
Now the output like below the picture:
Actually, I want the output like below the picture:
Hope someone can guide me to solve this problem. Thanks.
I have a problem to show multiple select dropdown with checkboxes value in the text.
Below is sample code:
<html>
<body>
<select id="mySelect" multiple class="form-control" onchange="myFunction()">
<option value="" selected>Sila Pilih</option>
<option value="Kakitangan MPK">Kakitangan MPK</option>
<option value="Ahli Majlis">Ahli Majlis</option>
</select>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
$('select[multiple]').multiselect({
columns: 4,
placeholder: 'Select options'
});
</script>
</body>
</html>
Now the output like below the picture:
Actually, I want the output like below the picture:
Hope someone can guide me to solve this problem. Thanks.
Share Improve this question edited Oct 29, 2020 at 13:55 Pi Network Crytocurrency asked Oct 29, 2020 at 13:48 Pi Network CrytocurrencyPi Network Crytocurrency 6211 gold badge11 silver badges29 bronze badges1 Answer
Reset to default 4If you have all the required libraries in place then you can use onChange like the following way:
$('select[multiple]').multiselect({
columns: 2,
placeholder: 'Select options',
onChange: function(element, checked) {
var options = $('#mySelect option:selected');
var selected = [];
$(options).each(function(index, brand){
selected.push($(this).val());
});
$('#demo').text("You selected: " + selected.join(','));
}
});
$('#demo').text("You selected: "+$('#mySelect').val());// to show the selected on page load<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery./jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<select id="mySelect" multiple class="form-control">
<option value="Sila Pilih" selected>Sila Pilih</option>
<option value="Kakitangan MPK">Kakitangan MPK</option>
<option value="Ahli Majlis">Ahli Majlis</option>
</select>
<p id="demo"></p>