[danik.js]

<select id="ret" name="pet" multiple="multiple" size="10">
    		<optgroup label="Группа 1">
			    <option value="19">Россия</option>
			    <option value="20">Узбекистан</option>
			    <option value="21">Казахстан</option>
			    <option value="22">Азербайджан</option>
    		</optgroup>
    		<optgroup label="Группа 2">
			    <option value="23">Австралия</option>
			    <option value="24">Австрия</option>
			    <option value="25">Алжир</option>
			    <option value="26">Ангилья</option>
			    <option value="27">Англия</option>
			    <option value="28">Ангола</option>
			    <option value="29">Антигуа</option>
    		</optgroup>
		</select>
		<script>
			var listbox = document.getElementById('ret');
			listbox.addEventListener('mousedown', function(e){
				var target = e.target;
				switch (target.nodeName)
				{
					case 'OPTION':
						var groupNode = target.parentNode;
						break;
					case 'OPTGROUP':
						var groupNode = target;
						break;
					default:
						return;
				}
				Array.prototype.forEach.call(this.options, function(option){
					option.selected = option.parentNode == groupNode;
				});
				this.focus();
				e.preventDefault();
			});
		</script>

Нужно немного доточить, если нужна поддержка IE8.