带有多选的 Select2 下拉列表

Question

I have made a multiselect dropdown using select 2 and bootstrap.
The selected options list is displayed inside the search box.

I want some help in displaying the selected options list in the div I made. Here is the codepen.

My Codepen

 <div class="card"> <div class="card-header ">Availability</div> <div class="card-body "> <select name="sel" multiple="multiple" class="mul-select" onchange="fun()"> <option value="First">First</option> <option value="Second">Second</option> <option value="Third">Third</option> <option value="Fourth">Fourth</option> <option value="Fifth">Fifth</option> </select> <div class="container display-here"> Display selected options in this div </div> </div> </div>

Answer 1

Please change your code to this hope it helps.

<div class="card">
  <div class="card-header ">Availability</div>
  <div class="card-body ">

    <select id="multipleSelect" name="sel" multiple="multiple" class="mul-select">

      <option value="First">First</option>
      <option value="Second">Second</option>
      <option value="Third">Third</option>
      <option value="Fourth">Fourth</option>
      <option value="Fifth">Fifth</option>
    </select>
    <div class="container display-here">
    
    </div>
  </div>
</div>

and your script as below. I have maintained values in an array and then displayed them in the div

$(document).ready(function() {
    $(".mul-select").select2({
        placeholder: "Select options",
        tags: true,
        closeOnSelect: false

    })
});
var selectArr = [];

$('#multipleSelect').change(function() {

    var idx = $.inArray($(this).val(), selectArr);
    if (idx == -1) {
        selectArr.push($(this).val());
    } else {
        selectArr.splice(idx, 1);
    }
    $.each(selectArr, function(index, value) {
        $('.display-here').text(value);
    });

});

function fun(selectObj) {
    var selectedOptions = $('.mul-select option:selected').length;

    console.log(selectObj.value);


    if (selectedOptions <= 5) $(':input[type="submit"]').prop("disabled", false);
    if (selectedOptions < 1 || selectedOptions > 5) $(':input[type="submit"]').prop("disabled", true);
}


function func() {
    if (document.getElementsByClassName('init')[0].checked === true) console.log(true)
    else console.log(false)
}