在使用jquery-multiselect的时候遇见许多的问题,如何取值,取到值又如何在刷新页面之后保持选中,本人JS学的实在是不咋地,导致“刷新”这个问题研究了半天,找了各种博客,乱七八糟也没有个准的,最后还是自己琢磨出来的,自己做个存档,有需要的也参考一下。
HTML
<li>
<label>支付方式:</label>
<div class="vocation">
<select multiple="multiple" οnchange="showValues()" id="payWay" name="payWay">
<option value="银盛">银盛</option>
<option value="财付通">财付通</option>
<option value="王府井pos2">王府井pos2</option>
<option value="数字王府井">数字王府井</option>
<option value="畅捷通PLUS" >畅捷通PLUS</option>
<option value="银联手机">银联手机</option>
<option value="易宝手机保证金">易宝手机保证金</option>
<option value="易宝网银保证金">易宝网银保证金</option>
<option value="畅捷通POS">畅捷通POS</option>
<option value="易宝手机车款">易宝手机车款</option>
<option value="现在支付手机车款">现在支付手机车款</option>
</select>
</div>
</li>
取值的JS方法showValues()
//获取支付方式多选下拉框选中的值
function showValues() {
var array_of_checked_values = $("#payWay").multiselect("getChecked").map(function () {
return this.value;
}).get();
}
刷新页面之后保持选中状态 - 不论是选一个还是选多个
$(document).ready(function () { //放在ready方法里
$('.tablelist tbody tr:odd').addClass('odd');//请无视 $('#startPaymentDate').datepicker();//其他需求请无视 $('#endPaymentDate').datepicker();//其他需求请无视
//初始化多选框 var el = $("#payWay").multiselect({ noneSelectedText: "==请选择==", checkAllText: "全选", uncheckAllText: '全不选', selectedList: 3 }); //刷新页面之后依然选择选中项 var data = "$!{payWay}";//这个值是从后台查出来返回的,结合自己的需求拿到你的值吧 data = ',' + data + ','; $('#payWay option').each(function(){ if(data.indexOf(',' + this.value + ',')!==-1){ this.selected = true;//设置选中 } }); $("#payWay").multiselect('refresh');//这个很关键,一定要加上
});
AJAX - 只有写注释的两点和多选框有关,其他的是页面的其他需求所需
//交易金额折线趋势图 function payAmountBrokenLine() { var startPaymentDate = $("#startPaymentDate").val(); var endPaymentDate = $("#endPaymentDate").val(); var payWayArray = encodeURI($("#payWay").val());//获取多选框的值 //alert(payWayArray); var arr = []; var date = []; $.ajax({ type: "get", async: false, url: "/detailDailyPaper/payAmountBrokenLineData.action", data: { startPaymentDate: startPaymentDate, endPaymentDate: endPaymentDate, payWayArray: payWayArray//传给后台 }, success: function (data) { $(data.data).each(function (index, item) { arr.push([item.totalSums]) date.push([item.paymentDate]) }); chartLine.series[0].setData(arr); chartLine.xAxis[0].setCategories(date); }, error: function (e) { alert("不好意思,请要访问的图标跑到火星去了。。。。"); } }); }