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

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

    需求:在页面当点击状态多选框时 实现option的勾选状态,把对应的option的value值赋给 在form表单的隐藏input框()   

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

    

关于jquery的多选框获取值和状态回显_第1张图片


状态:   

     

页面:

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



注意:引用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);
}
});





你可能感兴趣的:(JavaScript)