Select2 Demo

by Daniel Mejia

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<select id="select" style="width: 150px;">
    <option></option>
    <option class="car">Car 1</option>
    <option class="car">Car 2</option>
    <option class="car">Car 3</option>
    <option class="plane">Plane 1</option>
    <option class="plane">Plane 2</option>
    <option class="plane">Plane 3</option>
</select>
<a id='change' href='#'>Planes</a>

JavaScript

$option='car';
$("#select").select2({
    matcher: function(term, text, option) {
        return option.hasClass($option);
    }
});

$("a#change").on('click',function(e){
    if(e.target.text=='Planes'){
        $option='plane';
        e.target.text="Cars";
    }else{
        $option='car';
        e.target.text="Planes";
    }
});