Wsrtjtyk

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

.dropdown-menu input {

   margin-right: 10px;

}   

<div class="btn-group">

    <a href="#" class="btn btn-primary"><i class="fa fa-cogs"></i></a>

    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

      <span class="caret"></span>

    </a>

    <ul class="dropdown-menu" style="padding: 10px" id="myDiv">

        <li><p><input type="checkbox" value="id1" > OA Number</p></li>

        <li><p><input type="checkbox" value="id2" >Customer</p></li>

        <li><p><input type="checkbox" value="id3" > OA Date</p></li>

        <li><p><input type="checkbox" value="id4" >Product Code</p></li>

        <li><p><input type="checkbox" value="id5" >Name</p></li>

        <li><p><input type="checkbox" value="id6" >WI Number</p></li>

        <li><p><input type="checkbox" value="id7" >WI QTY</p></li>

        <li><p><input type="checkbox" value="id8" >Production QTY</p></li>

        <li><p><input type="checkbox" value="id9" >PD Sr.No (from-to)</p></li>

        <li><p><input type="checkbox" value="id10" > Production Date</p></li>

        <button class="btn btn-info" onClick="showTable();">Go</button>

    </ul>

</div>

// This function should be called while loading page

var loadParentTaskList = function(){

    $.ajax({

        url: yoururl,

        method: 'POST',

        success: function(data){

            // To add options list coming from AJAX call multiselect

            for (var field in data) {

                $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');

            }

   

            // To initiate the multiselect call 

            $("#parent_task").multiselect({

                includeSelectAllOption: true

            })

        }

    });

}

// Multiselect drop down list with id parent_task

<select id="parent_task" multiple="multiple">

</select>

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

$(".multiple_select").mousedown(function(e) {

    if (e.target.tagName == "OPTION") 

    {

      return; //don't close dropdown if i select option

    }

    $(this).toggleClass('multiple_select_active'); //close dropdown if click inside <select> box

});

$(".multiple_select").on('blur', function(e) {

    $(this).removeClass('multiple_select_active'); //close dropdown if click outside <select>

});

	

$('.multiple_select option').mousedown(function(e) { //no ctrl to select multiple

    e.preventDefault(); 

    $(this).prop('selected', $(this).prop('selected') ? false : true); //set selected options on click

    $(this).parent().change(); //trigger change event

});



	

	$("#myFilter").on('change', function() {

      var selected = $("#myFilter").val().toString(); //here I get all options and convert to string

      var document_style = document.documentElement.style;

      if(selected !== "")

        document_style.setProperty('--text', "'Selected: "+selected+"'");

      else

        document_style.setProperty('--text', "'Select values'");

	});

:root

{

	--text: "Select values";

}

.multiple_select

{

	height: 18px;

	width: 90%;

	overflow: hidden;

	-webkit-appearance: menulist;

	position: relative;

}

.multiple_select::before

{

	content: var(--text);

	display: block;

  margin-left: 5px;

  margin-bottom: 2px;

}

.multiple_select_active

{

	overflow: visible !important;

}

.multiple_select option

{

	display: none;

    height: 18px;

	background-color: white;

}

.multiple_select_active option

{

	display: block;

}



.multiple_select option::before {

  content: "2610";

}

.multiple_select option:checked::before {

  content: "2611";

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="myFilter" class="multiple_select" multiple>

  <option>A</option>

  <option>B</option>

  <option>C</option>

  <option>D</option>

  <option>E</option>

</select>