jquery-multiselect取值、刷新页面保持选中、AJAX相关问题集合

在使用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();
    }
           

刷新页面之后保持选中状态 - 不论是选一个还是选多个

$('.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("不好意思，请要访问的图标跑到火星去了。。。。");
            }
        });
    }