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

来源:互联网 发布:网络胜利组风车动漫 编辑:程序博客网 时间:2024/05/18 03:27

 
在使用jquery-multiselect的时候遇见许多的问题,如何取值,取到值又如何在刷新页面之后保持选中,本人JS学的实在是不咋地,导致“刷新”这个问题研究了半天,找了各种博客,乱七八糟也没有个准的,最后还是自己琢磨出来的,自己做个存档,有需要的也参考一下。

HTML

   <li>        <label>支付方式:</label>        <div class="vocation">            <select multiple="multiple" onchange="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("不好意思,请要访问的图标跑到火星去了。。。。");            }        });    }



阅读全文
1 0