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("不好意思，請要通路的圖示跑到火星去了。。。。");
            }
        });
    }