将后台中获取的值传到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>
- 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