jquery - Hiding and showing multiple selects -

i have 2 selects, , want remove, based on values second select, values first. example: if select value 1 , 2 second select, want values 2,3,4,5 hidden, , if in second select value 3, want values 1,2,3 hidden:

select1:

<select name="select1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> 

select2:

<select name="select2"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> 

this code hiding in case selected 1 or 2:

var ary=[2,3,4,5]; $('[name=select1] option').filter(function(){ return ($.inarray(parseint(this.value),ary) >-1);}).hide(); 

this code works hiding, have problem. when code hides 2,3,4,5 on value 1 , 2, selecting value 3 in second select shows me value 1, because others hidden. solved using show(). , 2,3,4,5 showed can't hide value 1 because of return :// tried this, won't work:

var ary=[4,5]; var ary2=[1]; $('[name=select1] option').filter(function(){ return ($.inarray(parseint(this.value),ary) >-1);}).hide()&&($.inarray(parseint(this.value),arry2) >-1);}).show(); 

i tried call function refresh select1 , showing values, , in functions use hides, think wouldbe right way, don't know how solve it?

fiddle of here: http://jsfiddle.net/8zuge/

note, adding list items guess bit more efficient here, idea:

var $resetvalues = $('#select1').find("option");  $('#select2').on('change', function() {     var selected = $("option:selected", this).val();     // reset select1     $('#select1').empty();     $resetvalues.each(function() {          $('#select1').append($(this));     });      var array; // hidden values     if(selected > 0 && selected < 3) {         array = [2,3,4,5];     } else {         array = [1,2,3];     }      $('#select1 option').filter(function() {         return ($.inarray(parseint($(this).val()), array) != -1);     }).remove(); });