代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
<div class="modal-body">
<div style="display:none;">
<select id="item_ids" name="item_ids[]" multiple="multiple"></select>
</div>
<form>
<table border="0">
<tbody>
<tr>
<td>
<select multiple="" size="20" style="width: 230px; height: 260px" id="inner_left" name="listLeft">
<option value="10">127.0.0.1</option>
</select>
</td>
<td style="width: 100px">
<nobr></nobr>
<center>
<nobr>
<input type="button" class="btn" onclick="moveDualList(this.form.listRight,this.form.listLeft,false)" name="Add <<" value="<">
<br>
</nobr>
<nobr>
<input type="button" class="btn" onclick="moveDualList(this.form.listLeft,this.form.listRight,false)" name="Add >>" value=">">
<br>
<br>
<br>
</nobr>
<nobr>
<input type="button" class="btn" onclick="moveDualList(this.form.listRight,this.form.listLeft,true)" name="Add All <<" value="<<">
<br>
</nobr>
<nobr>
<input type="button" class="btn" onclick="moveDualList(this.form.listLeft,this.form.listRight,true)" name="Add All >>" value=">>">
<br>
</nobr>
<nobr>
</nobr>
</center>
<nobr></nobr><nobr></nobr>
</td>
<td>
<select multiple="" size="20" style="width: 230px; height: 260px" name="listRight">
<option value="1">192.168.0.1</option>
<option value="2">192.168.0.2</option>
<option value="3">192.168.0.3</option>
</select>
</td>
</tr>
</tbody>
</table>
<button type="button" id="btn_submit">提交保存</button>
</form>
</div>
</body>
</html>
<script>
function moveDualList(srcList, destList, moveAll){
if ((srcList.selectedIndex == -1) && (moveAll == false)){
return;
}
newDestList = new Array(destList.options.length);
var len = 0;
for (len = 0; len < destList.options.length; len++){
if (destList.options[len] != null){
newDestList[len] = new Option(destList.options[len].text, destList.options[len].value, destList.options[len].defaultSelected, destList.options[len].selected);
}
}
for (var i = 0; i < srcList.options.length; i++){
if (srcList.options[i] != null && (srcList.options[i].selected == true || moveAll)){
newDestList[len] = new Option(srcList.options[i].text, srcList.options[i].value, srcList.options[i].defaultSelected, srcList.options[i].selected);
len++;
}
}
newDestList.sort(compareOptionValues);
for (var j = 0; j < newDestList.length; j++){
if (newDestList[j] != null){
destList.options[j] = newDestList[j];
}
}
for (var i = srcList.options.length - 1; i >= 0; i--){
if (srcList.options[i] != null && (srcList.options[i].selected == true || moveAll)){
srcList.options[i] = null;
}
}
}
function compareOptionValues(a, b) {
var sA = parseInt( a.value, 36 );
var sB = parseInt( b.value, 36 );
return sA - sB;
}
$('#btn_submit').click(function(){
$('#inner_left > option').each(function(){
$(this).attr('selected','true');
});
$('#item_ids').html($('#inner_left').html());
if ($('#item_ids').val() == null||$('#item_ids').val() == '') {
alert("请选择服务器!");
return false;
}
});
</script>