jquery multiselect如何实现下拉框多选并获取多个选项的值

    今天做项目遇到了一个需要用多选框实现多选功能、并将多选框的值传到后台实现插入一张表的问题，最开始一直在想用复选框实现多选功能，后来发现做起来页面不好看，最后在网上查资料，想找到一种方便使用的插件，最后选择了multiselect这个插件。

    首先简单说下我要实现的功能。需要做添加一个用户对应多个角色的功能，即在新增一个用户user的时候给他选择多个角色，新增成功时将多个角色对应的id和新增的用户id插入到role_user表中。

    1）实现下拉框多选。代码如下：

     首先引入需要用到的文件jquery.js， jquery.multiSelect.js， jquery.bgiframe.min.js， jquery.multiSelect.css， 页面代码如下：

     <tr>
            <td class="tableleft">角色</td>
            <td class="hovercolor">
                 <select class="inputtext" id="rIds"  name="rIds" multiple="multiple" style="height:29px;width:120px;" required>
                 <option value="">--角色--</option>
             <c:forEach items="${roles}" var="item" varStatus="cStatus">
 <option value="${item.id}" <%--  <c:if test="${item.id == orgId}">selected="selected"</c:if> --%>>${item.roleName}</option>
 </c:forEach>
                 </select> 
            </td>
        </tr>

   js代码如下：

   var delIds = [];

   $(document).ready( function() {
$("#rIds").multiSelect({ 
selectAll: false,
oneOrMoreSelected: '*',
selectAllText: '全选',
noneSelected: '--角色--'
}, function(){   //回调函数
if($("[name*='rIds']:checked").length > 0)
{
$("input[name*='rIds']:checked").each(function(){ 
var index = $.inArray($(this).attr("value"), delIds);  //$.inArray()去重
if(-1 == index) {
delIds.push($(this).attr("value"));//将选中的选项的值放到一个数组中，并去重，这样成功获取到选中的选项的value值，比网上的方法简单多了~
}
});
}
}); 

});

    2）保存方法代码如下：

    function saveOrUpdateUser (){
var loginName = $("#loginname").val();
var userName = $("#username").val();
var orgId = $("#orgId").val();
var pwd = $("#pwd").val();
var rIds = delIds;
var userId= 0;
if(checkLoginName() && checkUserName() && checkPwdOne() && checkPwdTwo()){
pwd = encrypt(pwd,loginName);
$.ajax({
type:"POST",
url:ctx + "/user/editUser",
cache:false,
dataType:"json",
data:{
loginName:loginName,
userName:userName,
pwd:pwd,
   orgId:orgId,
   rIds:rIds,
   id : userId
},
success:function(data){
if(data.success){
layer.msg("操作成功",{
icon: 1,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
},function(){
parent.layer.close(index); //根据窗口索引关闭窗口   
});
} else {
layer.msg(data.msg,{
icon: 2,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
},function(){
parent.layer.close(index); //根据窗口索引关闭窗口   
});
}
}

});

}

}

    3）java部分代码如下：

   userService.insert(userVo);
   for (int i = 0; i < rIds.length; i++) {
RoleUser roleUser = new RoleUser();
roleUser.setRoleId(rIds[i]);
roleUser.setUserId(userVo.getId());
roleUserService.insert(roleUser);
}

      4）由于我表中设置的主键id均是Integer自增，用的框架是SpringMVC+MyBatis，在新增用户的同时还需要将新增用户的id以及对应的多个角色id插入到role_user表中，因此需要将对应xml文件中的insert方法改写，之前写的insert方法返回的都是0或1，即表示插入是否成功，现在需要改写使它的返回值为对应的用户id，这样在新增用户的同时可以调用其getId方法将其id值获取并成功插入到role_user表中，改写代码如下：

<insert id="insert" useGeneratedKeys="true" keyProperty="id" parameterType="com.zcsy.manage.model.system.User">