关于jquery的多选框获取值和状态回显

    最近开发一个新功能模块设计到状态多选框的勾选及查询后状态的回显保留。

    需求：在页面当点击状态多选框时 实现option的勾选状态，把对应的option的value值赋给 在form表单的隐藏input框(<input type="hidden" id="muti_status" name="muti_status" value=""/>)   

后台通过(String status = request.getParameter("muti_status");)方式获取到前台页面传递的多选框勾选中的参数。后台通过查询数据返回一个带有分页的dnlist，把多个状态值回传(request.setAttribute("status", status);)到前台的form表单的隐藏input框(<input type="hidden" id="sta" name="sta" value="${status!}">)，返回的值存value="${status!}"，

    

<td align="right" style="width:50px;padding-left: 5px;">状态:&nbsp;&nbsp;&nbsp;</td>
<td width="50">
      <select id="muti_statu" name="muti_statu" multiple="multiple" style="width:100px;" onchange="muti_select()">
                                <option value="TCPD">通知提柜</option>
                                <option value="ECDSP">已提柜</option>
                                <option value="TRATA">已到厂</option>
                                <option value="ZHKS">待装</option>
                                <option value="ZHWC">已封柜</option>
                                <option value="TRETD">已离厂</option>
                                <option value="FCRTN">完成</option>
         </select>

页面：

目前多选框的值是写死的，select绑定一个onchange事件muti_select()，引入的js，css文件

<link href="${rc.contextPath}/css/multiple-select.css" rel="stylesheet" type="text/css"/>

<script src="${rc.contextPath}/js/multiple-select.js"></script>

注意：引用multiple-select.js时需要在页面加载时进行初始化，$(document).ready(function(){
$('#muti_statu').multipleSelect();

});

http://wenzhixin.net.cn/p/multiple-select/

//获取选中的值
function getAreas(selector){
return $(selector).multipleSelect('getSelects');
}
//获取文本
function getAreasText(selector){
return $(selector).multipleSelect('getSelects','text');
}

//多选框的onchange事件
function muti_select(){
var stat = getAreas("#muti_statu");
$("#muti_status").val(stat);
//value值
var muti = getAreas('#muti_statu');
//文本值
var mu = getAreasText('#muti_statu');
var sta_val = $("#muti_statu").attr('val',mu);
}

//多选框状态值的回显
$(function(){
if($("#sta").val()!= null){
var status = $("#sta").val();
var st = status.split(",");
$("#muti_statu").multipleSelect("setSelects", st);
}
});