select不支持双击事件

<div class="centent" style="width:200px; float:left; margin-right:20px;">
<select multiple="multiple" id="select1" style="width:150px; height:160px;">
<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>

<div>
<span id="add" style="display:block; width:140px; cursor:pointer;">选中添加到右边&gt;&gt;</span>
<span id="addAll" style="display:block; width:140px; cursor:pointer;">全部添加到右边&gt;&gt;</span>
</div></div>
<div class="centent" style="width:200px; float:left; margin-right:20px;">
<select multiple="multiple" id="select2" style="width:150px; height:160px;">
</select>
<div>
<span id="add1" style="display:block; width:140px; cursor:pointer;">&lt;&lt;选中删除到左边</span>
<span id="addAll1" style="display:block; width:170px; cursor:pointer;">&lt;&lt;全部选中删除到左边</span>
</div>
</div>

<script type="text/javascript">

//下拉框多选的应用   9：57
$(function(){
 //开始把左边的添加到右边
 $("#add").click(function(){                             //把选中的添加到右边
  $option = $("#select1 option:selected");
  $option.appendTo("#select2");
  })
  $("#addAll").click(function(){                       //全部添加到右边
   $option = $("#select1 option");
   $option.appendTo("#select2");
   })
   $("#select1").dbclick(function(){                  //双击添加到右边
    $option = $("#select1 option:selected",this);
    $option.appendTo("#select2");
    })
    //开始右边的添加到左边
    $("#add1").click(function(){                        //把选中的添加到左边
     $option = $("#select2 option:selected");
     $option.appendTo("#select1");
     })
     $("#addAll1").click(function(){                    //全部添加到左边
      $option = $("#select2 option");
      $option.appendTo("#select1");
      })
      $("#select2").dbclick(function(){                //双击添加到左边
       $option = $("option:selected",this);
       $option.appendTo("#select1");
       })
 })

</script>