jQuery插件 - jQuery - 。
jQuery插件---MultiSelects(左右选框)，支持select下option元素的上移下移
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>demo</title>
<script src="http://demo.deeka.cn/limit2checked/jquery-1.2.6.pack.js"></script>
<script>
<!--
$(function(){
$("#s1 option:first,#s2 option:first").attr("selected",true);
$("#s1").dblclick(function(){
$("option:selected",this).clone().appendTo("#s2");
$("option:selected",this).remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#s2").dblclick(function(){
$("option:selected",this).clone().appendTo("#s1");
$("option:selected",this).remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#add").click(function(){
$("#s1 option:selected").clone().appendTo("#s2");
$("#s1 option:selected").remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#remove").click(function(){
$("#s2 option:selected").clone().appendTo("#s1");
$("#s2 option:selected").remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#addall").click(function(){
$("#s1 option").clone().appendTo("#s2");
$("#s1 option").remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#removeall").click(function(){
$("#s2 option").clone().appendTo("#s1");
$("#s2 option").remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#s1up").click(function(){
var so = $("#s1 option:selected");
if(so.get(0).index!=0){
so.each(function(){
$(this).prev().before($(this));
});
}
});
$("#s1down").click(function(){
var alloptions = $("#s1 option");
var so = $("#s1 option:selected");
if(so.get(so.length-1).index!=alloptions.length-1){
for(i=so.length-1;i>=0;i--)
{
var item = $(so.get(i));
item.insertAfter(item.next());
}
}
});
$("#s2up").click(function(){
var so = $("#s2 option:selected");
if(so.get(0).index!=0){
so.each(function(){
$(this).prev().before($(this));
});
}
});
$("#s2down").click(function(){
var alloptions = $("#s2 option");
var so = $("#s2 option:selected");
if(so.get(so.length-1).index!=alloptions.length-1){
for(i=so.length-1;i>=0;i--)
{
var item = $(so.get(i));
item.insertAfter(item.next());
}
}
});
});
-->
</script>
</head>
<body>
<table width="288" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="29">
<input type="button" name="s1up" id="s1up" value="↑" /><br />
<input type="button" name="s1down" id="s1down" value="↓" /></td>
<td width="100"><select name="s1" size="10" multiple="multiple" id="s1" style=" width:100px;">
<option value="opt01">option01</option>
<option value="opt02">option02</option>
<option value="opt03">option03</option>
<option value="opt04">option04</option>
<option value="opt05">option05</option>
<option value="opt06">option06</option>
<option value="opt07">option07</option>
<option value="opt08">option08</option>
<option value="opt09">option09</option>
<option value="opt10">option10</option>
</select></td>
<td width="37" align="center"><input type="button" name="addall" id="addall" value=">|" /><br /><input type="button" name="add" id="add" value=">>" /><br /><input type="button" name="remove" id="remove" value="<<" /><br /><input type="button" name="removeall" id="removeall" value="|<" /></td>
<td width="100"><select name="s2" size="10" multiple="multiple" id="s2" style=" width:100px;">
</select></td>
<td width="119">
<input type="button" name="s2up" id="s2up" value="↑" /><br />
<input type="button" name="s2down" id="s2down" value="↓" /></td>
</tr>
</table>
<p>支持直接双击添加/删除，上下(支持间隔)排序</p>
</body>
</html>
CODE:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>demo</title>
<script src="http://demo.deeka.cn/limit2checked/jquery-1.2.6.pack.js"></script>
<script>
<!--
$(function(){
$("#s1 option:first,#s2 option:first").attr("selected",true);
$("#s1").dblclick(function(){
$("option:selected",this).clone().appendTo("#s2");
$("option:selected",this).remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#s2").dblclick(function(){
$("option:selected",this).clone().appendTo("#s1");
$("option:selected",this).remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#add").click(function(){
$("#s1 option:selected").clone().appendTo("#s2");
$("#s1 option:selected").remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#remove").click(function(){
$("#s2 option:selected").clone().appendTo("#s1");
$("#s2 option:selected").remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#addall").click(function(){
$("#s1 option").clone().appendTo("#s2");
$("#s1 option").remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#removeall").click(function(){
$("#s2 option").clone().appendTo("#s1");
$("#s2 option").remove();
$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#s1up").click(function(){
var so = $("#s1 option:selected");
if(so.get(0).index!=0){
so.each(function(){
$(this).prev().before($(this));
});
}
});
$("#s1down").click(function(){
var alloptions = $("#s1 option");
var so = $("#s1 option:selected");
if(so.get(so.length-1).index!=alloptions.length-1){
for(i=so.length-1;i>=0;i--)
{
var item = $(so.get(i));
item.insertAfter(item.next());
}
}
});
$("#s2up").click(function(){
var so = $("#s2 option:selected");
if(so.get(0).index!=0){
so.each(function(){
$(this).prev().before($(this));
});
}
});
$("#s2down").click(function(){
var alloptions = $("#s2 option");
var so = $("#s2 option:selected");
if(so.get(so.length-1).index!=alloptions.length-1){
for(i=so.length-1;i>=0;i--)
{
var item = $(so.get(i));
item.insertAfter(item.next());
}
}
});
});
-->
</script>
</head>
<body>
<table width="288" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="29">
<input type="button" name="s1up" id="s1up" value="↑" /><br />
<input type="button" name="s1down" id="s1down" value="↓" /></td>
<td width="100"><select name="s1" size="10" multiple="multiple" id="s1" style=" width:100px;">
<option value="opt01">option01</option>
<option value="opt02">option02</option>
<option value="opt03">option03</option>
<option value="opt04">option04</option>
<option value="opt05">option05</option>
<option value="opt06">option06</option>
<option value="opt07">option07</option>
<option value="opt08">option08</option>
<option value="opt09">option09</option>
<option value="opt10">option10</option>
</select></td>
<td width="37" align="center"><input type="button" name="addall" id="addall" value=">|" /><br /><input type="button" name="add" id="add" value=">>" /><br /><input type="button" name="remove" id="remove" value="<<" /><br /><input type="button" name="removeall" id="removeall" value="|<" /></td>
<td width="100"><select name="s2" size="10" multiple="multiple" id="s2" style=" width:100px;">
</select></td>
<td width="119">
<input type="button" name="s2up" id="s2up" value="↑" /><br />
<input type="button" name="s2down" id="s2down" value="↓" /></td>
</tr>
</table>
<p>支持直接双击添加/删除，上下(支持间隔)排序</p>
</body>
</html>
补充：网页制作,jquery
