$("option:selected",this) 的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuer測試</title>
    <script language="javascript" src="jquery-1.3.1.js">
    </script>
   <style type="text/css">
* { margin:0; padding:0; }
div.centent {
   float:left;
   text-align: center;
   margin: 10px;
}
span {
   display:block;
   margin:2px 2px;
   padding:4px 10px;
   background:#898989;
   cursor:pointer;
   font-size:12px;
   color:white;
}
   </style>
<script type="text/javascript">
    $(function(){
        /*
        $("#add").click(function(){
            var $options = $("#select1 option:selected");
            var $remove = $options.remove();
           $remove.appendTo($("#select2"));
       });
       */
       $("#add").click(function(){
            $("#select1 option:selected").appendTo($("#select2"));
       });

       $("#add_all").click(function(){
            $("#select1 option").appendTo($("#select2"));
       });

       $("#select1 option").dblclick(function(){ //dblclick
           $(this).appendTo($("#select2"));
       });

       //another side

       $("#remove").click(function(){
            $("#select2 option:selected").appendTo($("#select1"));
       });

       $("#remove_all").click(function(){
            $("#select2 option").appendTo($("#select1"));
       });
        /*
       $("#select2 option").dblclick(function(){ //dblclick
           $(this).appendTo($("#select1"));
       });
       */


       $("#select2").dblclick(function(){
            $("option:selected",this).appendTo("#select1");
       });

   });
</script>
</head>
<body>
<div class="centent">
       <select multiple="multiple" id="select1" style="width:100px;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>
           <option value="6">選項6</option>
           <option value="7">選項7</option>
       </select>
       <div>
           <span id="add" >選中新增到右邊>></span>
           <span id="add_all" >全部新增到右邊>></span>
       </div>
   </div>

   <div class="centent">
       <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
           <option value="8">選項8</option>
       </select>
       <div>
           <span id="remove"><<選中刪除到左邊</span>
           <span id="remove_all"><<全部刪除到左邊</span>
       </div>
   </div>
</body>
</html>

$("option:selected",this) 的使用

相關推薦