JQuery左右切换实现

最新推荐文章于 2022-11-18 09:15:27 发布

bit小兵

最新推荐文章于 2022-11-18 09:15:27 发布

阅读量548

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/duguangming/p/10497848.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.8.3.js"></script>
<script>
$(function(){
//获得点击事件 单个
$("#selectRight").click(function(){
//2 得到被选中的元素 . 追加 id值为 right
$("#left option:selected").appendTo("#right");
});
// 获得多个 单击事件
$("#selectAllRight").click(function(){
$("#left option").appendTo("#right");
});
});
</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 name="" id="left" multiple="multiple" style="width:100px;height:300px">
<option>iPhone!</option>
<option>小米9</option>
<option>华为10</option>

</select>
<p><a style="padding-left:25px" href="#" id="selectRight">&gt;&gt;</a></p>
<p><a style="padding-left:25px" href="#" id="selectAllRight">&gt;&gt;&gt;</a></p>
</span>
<span style="float: right;">
<font color="red">未有的商品</font>
<select name="" id="right" multiple="multiple" style="width:100px;height:300px">
<option>opp!</option>
<option>魅族</option>
<option>中兴</option>

</select>
<p><a href="#" >&lt;&lt;</a></p>
<p><a href="#">&lt;&lt;&lt;</a></p>
</span>
</td>

</tr>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/duguangming/p/10497848.html

bit小兵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery左右切换实现

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="../js/jquery-1.8.3.js"></script><script>$(function(){...
复制链接

扫一扫