类似QQ邮箱发件人选择器插件
时间:2009-08-03
来源:互联网
有没高手,分板一下这个类似QQ邮箱发件人选择器插件开发思路,在主页面上点一个button,弹出该先择器,左边一颗树待选择,右边已选的列表,最后把列表返回主页的输入框,最重要是树和左右上下移动的功能,能用jquery做最好了,谢谢
作者: kenchen0805 发布时间: 2009-08-03
俺给你看看这个:
<div class="left">
<select multiple="multiple" name="zlanmu" id="zlanmu" style="width:100px; height:200px;">
<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>
<option value="8">选项8</option>
</select>
<div>
<span id="add">添加到右边>></span><br /><br />
<span id="addall">全部添加到右边>></span>
</div>
</div>
<div class="right">
<select multiple="multiple" name="ylanmu" id="ylanmu" style="width:100px; height:200px;">
</select>
<div>
<span id="del"><<删除</span><br /><br />
<span id="delall"><<全部删除</span>
</div>
</div>
<script type="text/javascript">
$(function(){
$("#add").click(function(){
var too = $("#zlanmu option:selected");
// var remove = too.remove();//删除和追加直接追加就可以
//too.clone().appendTo("#ylanmu");
$("#ylanmu").append(too);
});
$("#addall").click(function(){
var too = $("#zlanmu option");
too.appendTo("#ylanmu");
});
//双击
$("#zlanmu").dblclick(function(){
var too2 = $("option:selected",this);
$("#ylanmu").append(too2);
too2.appendTo("#ylanmu");
});
});
</script>
希望有所帮助
<div class="left">
<select multiple="multiple" name="zlanmu" id="zlanmu" style="width:100px; height:200px;">
<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>
<option value="8">选项8</option>
</select>
<div>
<span id="add">添加到右边>></span><br /><br />
<span id="addall">全部添加到右边>></span>
</div>
</div>
<div class="right">
<select multiple="multiple" name="ylanmu" id="ylanmu" style="width:100px; height:200px;">
</select>
<div>
<span id="del"><<删除</span><br /><br />
<span id="delall"><<全部删除</span>
</div>
</div>
<script type="text/javascript">
$(function(){
$("#add").click(function(){
var too = $("#zlanmu option:selected");
// var remove = too.remove();//删除和追加直接追加就可以
//too.clone().appendTo("#ylanmu");
$("#ylanmu").append(too);
});
$("#addall").click(function(){
var too = $("#zlanmu option");
too.appendTo("#ylanmu");
});
//双击
$("#zlanmu").dblclick(function(){
var too2 = $("option:selected",this);
$("#ylanmu").append(too2);
too2.appendTo("#ylanmu");
});
});
</script>
希望有所帮助
作者: haibin666 发布时间: 2009-08-03
js.suggest.complete
作者: kuye3131 发布时间: 2009-08-07
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28