前端html分享—select的一个小技巧

今天分享下”前端html分享—select的一个小技巧“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。

XML/HTML Code复制内容到剪贴板

<div class="centent" style="width:200px; float:left; margin-right:20px;">    
<select multiple="multiple" id="select1" style="width:150px; 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>    
</select>    

<div>    
<span id="add" style="display:block; width:140px; cursor:pointer;">选中添加到右边>></span>    
<span id="addAll" style="display:block; width:140px; cursor:pointer;">全部添加到右边>></span>    
</div></div>    
<div class="centent" style="width:200px; float:left; margin-right:20px;">    
<select multiple="multiple" id="select2" style="width:150px; height:160px;">    
</select>    <p>http://www.qlyl1688.com</p>​
<div>    
<span id="add1" style="display:block; width:140px; cursor:pointer;"><<选中删除到左边</span>    
<span id="addAll1" style="display:block; width:170px; cursor:pointer;"><<全部选中删除到左边</span>    
</div>    
</div>  
JavaScript Code复制内容到剪贴板

<script type="text/javascript">    

//下拉框多选的应用 9：57 ​ ​  
$(function(){    
//开始把左边的添加到右边 ​ ​  
$("#add").click(function(){ //把选中的添加到右边 ​ ​  
$option = $("#select1 option:selected");    
$option.appendTo("#select2");    
})    
$("#addAll").click(function(){ //全部添加到右边 ​ ​  
$option = $("#select1 option");    
$option.appendTo("#select2");    
})    
$("#select1").dbclick(function(){ //双击添加到右边 ​ ​  
$option = $("#select1 option:selected",this);    
$option.appendTo("#select2");    
})    
//开始右边的添加到左边 ​ ​  
$("#add1").click(function(){ //把选中的添加到左边 ​ ​  
$option = $("#select2 option:selected");    
$option.appendTo("#select1");    
})    
$("#addAll1").click(function(){ //全部添加到左边 ​ ​  
$option = $("#select2 option");    
$option.appendTo("#select1");    
})    
$("#select2").dbclick(function(){ //双击添加到左边 ​ ​  
$option = $("option:selected",this);    
$option.appendTo("#select1");    
})    
})    
</script>

​以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！