<select multiple id="target">
  <option value="volvo">Volvo</option>
  <option value="saab" selected>Saab</option>
  <option value="opel" selected>Opel</option>
  <option value="audi">Audi</option>
</select>

/* Plugin styles */
#dropdown-checkbox-selected {

}

/* Temp styles to make environment nicer */
body {
  color: #ffffff;
  background-color: #2980b9;
  font-family: Verdana;
}

$(document).ready(function() {
  
  var $t = $("#target");
  var $options = $t.find("option");
  
  // Hide the original select
  $t.hide();
  
  // Construct a new select dropdown
  var $new = $("<input>", {
    type: "text",
    id: "dropdown-checkbox-selected",    
    value: function() {
      return $("option:selected").map(function(){ 
               return this.value; 
             }).get().join(' ');
    }
  });
  
  $(document).on('click', '#dropdown-checkbox-selected', function() {
    $dropdown.toggle();
  });
  
  $(document).on('click', '.dropdown-checkbox-option', function() {
    alert($(this).prop('checked'));
  });
  
  

  
  
  // Create a wrapper div for options
  var $dropdown = $("<div>", {
    id: "dropdown-checkbox-options"
  });
  

  $options.each(function(i) {
    
    var label = $(this).val(),
        isSelected = $(this).is(':selected'),
        value = $(this).val();
    
    var $option = $('<input>', {
      id: 'dropdown-checkbox-option' + i,
      class: 'dropdown-checkbox-option',
      type: 'checkbox',
      value: value,
      checked: isSelected
    });
    
    var $optionWrapper = $('<div>', {
      id: 'dropdown-checkbox-option-wrapper-' + i,
      class: 'dropdown-checkbox-option-wrapper'
    });
    
    $optionWrapper.wrapInner($option).append(label).appendTo($dropdown); 
  
  });
  
  $dropdown.insertAfter($t).hide();
  
  
  
  // Insert the new select dropdown to DOM
  $new.insertAfter($t);
  
});