How to preselect the options of a multiple select? (html + php)

Question

Is it possible to preselect some options of a multiselectbox that won't be deselected by adding a new option select?

I now have a normal multiple selectbox, which options will be preselected by PHP:

<select name="selectbox" multiple>
  <option value="A">A</option>
  <option value="B" selected>B</option>
  <option value="C">C</option>
  <option value="D" selected>D</option>
</select>

When I click at option A, option B and D will be deselected and A will be selected. I'd like to only deselect an item when someone clicks at an already selected option. When someone clicks at an option which is not yet selected, it has to be added to the already selected items.

What is the best way to do that? Or isn't that possible?

Answer 1

That is easy with javascript (jQuery), like this:

$('select[name=selectbox]').on('mousedown','option',function(ev) {
     ev.preventDefault();
     $(this).prop('selected', !$(this).is(':selected') );
});

See working demo