实现 如下图 js 效果

http://www.designchemical.com/lab/jquery/demo/jquery_create_add_remove_select_list.htm
http://www.designchemical.com/blog/index.php/jquery/create-add-remove-select-lists-using-jquery/

解决方案 »

  1.   

    <!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>
        <title>第一个简单的jQuery程序</title>
    <link type="text/css" rel="stylesheet" href="js/zTreeStyle/zTreeStyle.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
            </script><style type="text/css">
      body
      {
      background-color: white;
      margin: 0;
      padding: 0;
      
      }
       tadiv, p,ble, th, td
      {
      list-style: none;
      margin: 0;
      padding: 0;
      color: #333;
      font-size: 12px;
      font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
      }
    ul.dd{list-style:none;border:solid 1px #666;padding:0px;width:190px}
    ul li{border:solid 1px #666 ;margin:5px}
      </style>
     <script language="JavaScript" type="text/javascript">
      
    $(function(){<!--$(".select1 option").each(function(key,val){$.each(val,function(k,v){alert(k);});});-->
    $("#butR").click(function(){$(".select2").append($(":input[name='select1'] option").clone());
    });
    $("#butL").click(function(){
    $(".select1").append($(".select2 option:selected "));
    });$(".select1 ").dblclick(function(){
    $(".select2").append($(".select1 option:selected"));
    });$(".select2").dblclick(function(){
    $(".select1").append($(".select2 option:selected"));
    });
    });
      //-->
      </script>
    </head>
    <body>
    <table border="1">
    <tr><td colspan="3">下拉列表的操作</td></tr>
    <tr>
    <td>
    <select name="select1" id="select1" class="select1" multiple size="10">
    <option value="1">马</option>
    <option value="1">马</option>
    <option value="1">马</option>
    <option value="1">马</option>
    <option value="1">马</option><option value="1">马</option>
    <option value="1">马</option>
    <option value="1">马</option><option value="1">马</option>
    <option value="1">马</option><option value="1">马</option>
    <option value="1">马</option><option value="1">马</option></select>
    </td>
    <td>
    <input type="button" id="butR" value=" >>"/><input type="button" id="butL" value=" <<"/></td>
    <td><select name="select2" id="select2" class="select2" multiple size="10"></select>
    </td>
    </tr>
    </table>
    <ul>
    dddddddddddd
    </ul>
    <ul class="dd">
    <li>ddddd</li>
    <li>ddddd</li>
    <li>ddddd</li>
    </ul>
    </body>
    </body>
    </html>