這是基于html的下拉清單的左右選擇的案例；頁面效果如下：
HTML下拉清單的左右選擇 具體代碼如下：
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="s1" style="float:left">
<div>
<select id="select1" multiple="multiple" style="widyh=100px;height=100px">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<div>
<input type="button" value = "choice>>" onclick="selectLeft()"/><br/>
<input type="button" value = "all>>" onclick="allLeft()"/><br/>
</div>
</div>
<div id="s2" >
<div>
<select select id="select2" multiple="multiple" style="widyh=100px;height=100px">
<option >海馬</option>
</select>
</div>
<div>
<input type="button" value = "<<choice" onclick="selectRight()"/><br/>
<input type="button" value = "<<all" onclick="allRight()"/><br/>
</div>
</div>
</body>
<script type ="text/javascript">
function selectLeft()
{
var select2 = document.getElementById("select2");
var select1 = document.getElementById("select1");
var options1= select1.getElementsByTagName("option");
for (var i=;i<options1.length ;i++ )
{
option1=options1[i];
if(option1.selected==true)
{
select2.appendChild(option1);
i--;
}
}
}
function allLeft()
{
var select2 = document.getElementById("select2");
var select1 = document.getElementById("select1");
var options1= select1.getElementsByTagName("option");
for (var i=;i<options1.length ;i++ )
{
option1=options1[i];
select2.appendChild(option1);
i--;
}
}
function selectRight()
{
var select2 = document.getElementById("select2");
var select1 = document.getElementById("select1");
var options2= select2.getElementsByTagName("option");
for (var a=;a<options2.length ;a++ )
{
option2=options2[a];
if(option2.selected==true)
{
select1.appendChild(option2);
a--;
}
}
}
function allRight()
{
var select2 = document.getElementById("select2");
var select1 = document.getElementById("select1");
var options2= select2.getElementsByTagName("option");
for (var a=;a<options2.length ;a++ )
{
option2=options2[a];
select1.appendChild(option2);
a--;
}
}
</script>
</html>
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)