[danik.js]

В первую очередь нужно понимать что $ - это функция, а не какая-то магия.

$("select[name='group_id'] option[class='show']").removeClass('show').wrap(document.createElement ("span")).parent().hide();

Что тут происходит - непонятно. Вы оборачиваете опшны в спаны? Вобще-то внутри <select> не может быть никаких спанов. Кроме того это затратная операция, и в цикле в 1000 итераций будет очень тормозить.
Нужно также понимать что каждый id должен быть уникальным.

<p id="filter">
    <input type="button" value="l">
    <input type="button" value="i">
    <input type="button" value="d">
    <input type="button" value="s">
</p>
<p>select</p>
<select id="select" name="group_id" size="10" >
    <option>&nbsp;</option>
    <option value="lorem">Lorem</option>
    <option value="dolor">Dolor</option>
    <option value="ipsum">Ipsum</option>
    <option value="sit">Sit amet</option>
    <option value="lorem">Lorem1</option>
    <option value="dolor">Dolor1</option>
    <option value="ipsum">Ipsum1</option>
    <option value="sit">Sit amet1</option>
    <option value="lorem">Lorem2</option>
    <option value="dolor">Dolor2</option>
    <option value="ipsum">Ipsum2</option>
    <option value="sit">Sit amet2</option>
</select>
<script>
(function(){
    var select = document.getElementById('select');
    var removed = [];
    function filterOptions(startsWith) {
    	if (removed.length) {
    		for (var i = removed.length - 1; i >= 0; i--) {
    			select.insertBefore(removed[i][0], select[removed[i][1]]);
    		}
    	}
        for (var i = 1, option; option = select[i]; i++) {
        	if (option.value[0] !== startsWith) {
        		removed.push([option.parentNode.removeChild(option), i]);
        		i--;
        	}
        }
    }

    var filter = document.getElementById('filter');
    var onclick = function() { filterOptions(this.value) };
    for (var i = 0, button; button = filter.children[i]; i++) {
        button.onclick = onclick;
    }
})()
</script>