CODEWITHSUNDEEP
javascripthtmljqueryhtml-select
Pi Network Crytocurrency
Pi Network Crytocurrency

Reputation: 611

Show multiple select dropdown with checkboxes value in the text

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:

Output 1

Actually, I want the output like below the picture:

Output 2

Hope someone can guide me to solve this problem. Thanks.

Upvotes: 0

Views: 9195

Answers (1)

Mamun
Mamun

Reputation: 68923

If 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.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/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>

Upvotes: 4

Related Questions