一、JQUERY UI MULTISELECT组件下载地址：http://quasipartikel.at/multiselect/
组件如下图所示：左侧为选中区域，右侧为待选区域。选中区域支持拖拽排序。
二、组件主题可以访问JQuery UI官网下载：http://jqueryui.com/download
修改：<link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" />
三、如果已经习惯了右侧为待选区域，左侧为选中区域。
修改：/css/ui.multiselect.css
将
.ui-multiselect div.selected { position: relative; padding: 0; margin: 0; border: 0; float:left; }
………………
.ui-multiselect div.available { position: relative; padding: 0; margin: 0; border: 0; float:left; border-left: 1px solid; }
改为
.ui-multiselect div.selected { position: relative; padding: 0; margin: 0; border: 0; float:right; }
………………
.ui-multiselect div.available { position: relative; padding: 0; margin: 0; border: 0; float:right; border-right: 1px solid; }
四、如果你将这个组件部署到项目中，你会发现其他样式全都改变了。
只需要将/css/common.css下所有样式都删掉，只保留.multiselect {width: 460px;height: 200px;}#switcher {margin-top: 20px;}
五、由于示例许多组件都是远程加载、所有显示很慢，我们可以讲加载项修改本地。
<link rel="stylesheet" href="css/common.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" />
<link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/plugins/localisation/jquery.localisation-min.js"></script>
<script type="text/javascript" src="js/plugins/scrollTo/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/ui.multiselect.js"></script>
注：需要下载Jquery UI包 然后复制进去。
还有个themeswitchertool工具也是远程加载的，我没有找到下载方法~只能将其注释掉，不要样式转换功能（个人感觉没有什么用，找个喜欢的样式修改好就行了）。注释内容如下：
$('#switcher').themeswitcher();
…………………
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>
六、示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>jQuery UI Multiselect</title>
<link rel="stylesheet" href="css/common.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" />
<link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/plugins/localisation/jquery.localisation-min.js"></script>
<script type="text/javascript" src="js/plugins/scrollTo/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/ui.multiselect.js"></script>
<script type="text/javascript">
$(function(){
$.localise('ui-multiselect', { path: 'js/locale/'});
$(".multiselect").multiselect();
//$('#switcher').themeswitcher();
});
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<form name="form1" action="MultiSelect" method="post">
<select id="multiid" class="multiselect" multiple="multiple" name="multiname">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D" selected="selected">D</option>
<option value="E" selected="selected">E</option>
<option value="F">F</option>
<option value="China">China</option>
<option value="Japan">Japan</option>
<option value="America">America</option>
</select>
<br/>
<input type="submit" value="Submit Form"/>
</form>
<!--
<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>
-->
</div>
</div>
</body>
</html>
Servlet接收：
String[] str = request.getParameterValues("multiname");
for (int i = 0; i < str.length; i++) {
System.out.println(i + "：" + str[i]);
}
获取的顺序就是前天排好的顺序，可以按顺序存储~这样再显示顺序也不会变的！！！