[Html/CSS] select不支持双击dbclick事件

<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;">选中添加到右边>></span>  
  <span id="addAll" style="display:block; width:140px; cursor:pointer;">全部添加到右边>></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;"><<选中删除到左边</span>  
  <span id="addAll1" style="display:block; width:170px; cursor:pointer;"><<全部选中删除到左边</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>