<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.js"></script>
<script>
$(function(){
$("#selectRight").click(function(){
$("#left option:selected").appendTo("#right");
});
$("#selectLeft").click(function(){
$("#right option:selected").appendTo("#left");
});
$("#SelectAllRight").click(function(){
$("#left option").appendTo("#right");
});
$("#SelectAllLeft").click(function(){
$("#right option").appendTo("#left");
});
});
</script>
</head>
<body>
<table>
<tr>
<td>分类</td>
<td><input type="text" name="cname" value="手机"/></td>
</tr>
<tr>
<td>描述</td>
<td>
<textarea name="cdesc" rows="5" cols="15">
手机数码商品小米9
</textarea>
</td>
</tr>
<tr>
<td>
<span style="float: left;">
<font color="aqua">已经有的商品</font>
<select id="left" multiple="multiple" style="height: 300px;width: 100px;">
<option>iPhone!</option>
<option>小米9</option>
<option>荣耀10</option>
</select>
<p><a style="padding-left:25px" href="#" id="selectRight";> >></a></p>
<p><a style="padding-left:25px" href="#" id="SelectAllRight">>>></a></p>
</span>
<span style="float: left;">
<font color="red">未有的商品</font>
<select id="right" multiple="multiple" style="width: 100px; height: 300px;"/>
<option>opp!</option>
<option>魅族</option>
<option>中兴</option>
</select>
<p><a href="#" id="selectLeft"><<</a></p>
<p><a href="#" id="SelectAllLeft"><<</a></p>
</span>
</td>
</tr>
</table>
</body>
</html>
