jQueryでselectタグのselectedの移動

selected_move

<form id="form1">
<select id="date">
    <option value="">選択して下さい</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
</select>
<input type="image" src="submit.png">
<img src="befor.png" id="bf" class="change">
<img src="after.png" id="af" class="change">
</form>
<!-- ここからJS -->
<script type="text/javascript">
  $(function() {
    $('.change').click(function(){
      var id = $(this).attr("id");
      var curr = $("#date").prop("selectedIndex");
      var setdatev = parseInt(curr);
      if(id=="bf"){
        if(setdatev<=4){
          setdatev++;
        }
      }else{
        if(setdatev>=2){
          setdatev--;
        }
      }
      $("#date").prop("selectedIndex",setdatev);
      $("#form1").submit();
    })
  })
</script>