后台中获取的值传到select，并将左边select的值移到右边，将select的全部值传到后台

将后台中获取的值传到select，并将左边select的值移到右边，将select的全部值传到后台

原创 2017年07月27日 08:56:14

• 标签：
• 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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29

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);  
           }  
        }  
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

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!")
                            }
                        });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

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){

             }
         });
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

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;
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17