select2 - limiting selection of one list based on value of another

Question

How do I do what this fiddle does in select2 (http://ivaynberg.github.io/select2/)

http://jsfiddle.net/Q6h5s/

html:

<select id="sel1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>

<select id="sel2">
<option data-val="1">Banana</option>
<option data-val="1">Apple</option>
<option data-val="1">Orange</option>
<option data-val="2">Wolf</option>
<option data-val="2">Fox</option>
<option data-val="2">Bear</option>
<option data-val="3">Eagle</option>
<option data-val="3">Hawk</option>
<option data-val="4">BWM<option>
</select>

js:

$("#sel1").change(function() { 
if($(this).data('options') == undefined){
    $(this).data('options',$('#sel2 option').clone());
    } 
var id = $(this).val();
var options = $(this).data('options').filter('[data-val=' + id + ']');
$('#sel2').html(options);
});

is it possible with built in functionality, or do I need to hook into

also, is it possible to select the right sel1 after a sel2 has been chosen?

Answer 1

After testing thoroughly, I realized that my previous example was destructive in filtering. It only allowed a one time filter, and then your options were gone. I've taken a few minutes to fix that problem.

HTML:

<select id="sel1">
    <option value="all">ALL</option>
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>

<select id="sel2">
    <option data-val="1">Banana</option>
    <option data-val="1">Apple</option>
    <option data-val="1">Orange</option>
    <option data-val="2">Wolf</option>
    <option data-val="2">Fox</option>
    <option data-val="2">Bear</option>
    <option data-val="3">Eagle</option>
    <option data-val="3">Hawk</option>
    <option data-val="4">BMW</option>
</select>

<div class="cloned" style="margin-top: 2em;">
    <p>The data object in cache.</p>    
</div>

JavaScript:

var select = $('#sel2'),
    cache = $('#sel2').clone();
$('.cloned').append(cache);
$("#sel1").change(function() { 
    var id = $(this).val(),
        options = [];
    select.empty();
    cache.find('option').each(function () {
        if (id === 'all') {
            select.append($(this).clone());
        } else if ($(this).data('val') == id) {
            select.append($(this).clone());
        }
    });
});

Here is a working fork of your fiddle: http://jsfiddle.net/harveyramer/SY47J/