jQuery remove SELECT options based on another SELECT selected (Need support for all browsers)

Say I have this dropdown:

<select id="theOptions1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

I want it so that when the user selects 1, this is the thing that the user can choose for dropdown 2:

<select id="theOptions2">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

Or if the user selects 2:

<select id="theOptions2">
  <option value="a">a</option>
  <option value="b">b</option>
</select>

Or if the user selects 3:

<select id="theOptions2">
  <option value="b">b</option>
  <option value="c">c</option>
</select>

I tried the code posted here: jQuery disable SELECT options based on Radio selected (Need support for all browsers)

But it doesn't work for selects.

Please help! Thank you!

UPDATE: I really like the answer Paolo Bergantino had on: jQuery disable SELECT options based on Radio selected (Need support for all browsers)

Is there anyway to modify this to work with selects instead of radio buttons?

jQuery.fn.filterOn = function(radio, values) {
    return this.each(function() {
        var select = this;
        var options = [];
        $(select).find('option').each(function() {
            options.push({value: $(this).val(), text: $(this).text()});
        });
        $(select).data('options', options);
        $(radio).click(fun