<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select multiple="multiple" size="5" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select multiple="multiple" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<script>
$(document).on('click','select[multiple] option',function(e){
var a = $(this);
a.toggleClass('active')
a.parent().children('option:not(.active)').removeAttr('selected');
a.parent().children('option.active').attr('selected','selected');
e.preventDefault();
});
</script>
</body>
</html>