1. 程式人生 > >將後臺中獲取的值傳到select,並將左邊select的值移到右邊,將select的全部值傳到後臺

將後臺中獲取的值傳到select,並將左邊select的值移到右邊,將select的全部值傳到後臺

1.前臺程式碼

        <div>
            <table class="tableW-p100" >
                <tr>
                    <td>
                        <fieldset class="marginLeft-20" >
                            <h6 class="fontBold marginBottom-2" >左邊的值</h6>
                            <select
name="prirel_left" multiple="multiple" size="10" id="prirel_left" class="prirel_left" style="width: 130px;height: 190px;">
<option>fff121</option> <option>cc122</option> <option>
dd123</option> </select> </fieldset> </td> <td align="center"> <span class="arrowLeft" onclick="moveOption(document.getElementById('prirel_left'),document.getElementById('prirel_right'))"
>
<img alt="" src="${ctxStatic}/images/hbdt_mor.png" class="marginBottom-10"></span><br> <span class="arrowRight" onclick="moveOption(document.getElementById('prirel_right'), document.getElementById('prirel_left'))"><img alt="" src="${ctxStatic}/images/hbdt_mol.png" class="marginTop-10"></span><br> </td> <td> <fieldset class="marginRight-20"> <h6 class="fontBold marginBottom-2">右邊的值</h6> <select name="prirel_right" multiple="multiple" style="width: 130px;height: 190px;" size="10" id="prirel_right"> <option>Xare22</option> <option>Xt1232</option> </select> </fieldset> </td> </tr> </table> </div>

2.左邊的值移到右邊

    /*左右邊框的的內容左右移動*/
    function moveOption(obj1, obj2) {
        for(var i = obj1.options.length - 1 ; i >= 0 ; i--)  
        {  
            if(obj1.options[i].selected)  
            {  
               var opt = new Option(obj1.options[i].text,obj1.options[i].value);  
               opt.selected = true;  
               obj2.options.add(opt);  
               obj1.remove(i);  
           }  
        }  
    }

3.將後臺獲取的值放到左邊框

$.ajax({
                            method:'post',
                            data:'',
                            url:'xxxxxxx',
                            success:function(result){
                                alert(result);
                                if(result!=null && result != undefined){
                                    var str="";
                                    var data=eval("("+result+")");
                                    for(var i=0;i<data.length;i++){
                                        str+="<option>"+data[i].flightNo+"</option>"
                                    }
                                    $("#prirel_left").html(str);
                                }
                            },
                            error:function(){
                                alert("xxxx!")
                            }
                        });

4.將右邊框的全部值傳到後臺

     function savePriel(){
         var prirelRightId = document.getElementById("prirel_right");
         var prirelRightValues = new Array();
         for (var i = 0; i < prirelRightId.options.length; i++) {
             prirelRightValues[i] = prirelRightId.options[i].value;
         }

         //陣列序列化成Json字串
         var prirelRightJson = JSON.stringify(prirelRightValues);
         alert(prirelRightJson);
         $.ajax({
             type:'post',
             data:prirelRightJson,
             contentType: "application/json; charset=utf-8",
             url:'Xxxxxxxx',
             dataType: "json", 
             success:function(result){

             }
         });
    }

5.後臺controller

    //從資料庫獲取
    @ResponseBody
    @RequestMapping(value={"xxxxx",""})
    public String getPrirel(){
        List<Prirel> prirelList=***service........
        //將結果轉json.....
        return result;
    }

    //存
    @ResponseBody
    @RequestMapping(value={"xxxxx",""})
    public String prirelFlights(@RequestBody String prirelFlights){
        List<String> aaa=Gson.fromJson(prirelFlights, List.class);

        return null;
    }