实现 如下图 js 成效
日期：2014-05-16 浏览次数：20447 次
实现 如下图 js 效果
请问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/
------解决方案--------------------
<!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>
请问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/
------解决方案--------------------
<!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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
