<!DOCTYPE html>
<br lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
</style>
</head>
<p>您喜欢那款浏览器</p>
<input type="radio" name="broeser" onclick="check(this.value)" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="broeser" onclick="check(this.value)" value="google">google<br />
<input type="radio" name="broeser" onclick="check(this.value)" value="360">360安全浏览器<br />
<input type="radio" name="broeser" onclick="check(this.value)" value="Mozilla Firefox">Mozilla Firefox<br /><br />
您喜欢的浏览器是:<input type="text" style="width: 150px" id="loveInter" ><br /><br />
<hr>
请选择你喜欢的水果:</br>
<select id="s01" multiple="multiple" size="10" style="width: 100px;height: 130px">
<option>芒果</option>
<option>苹果</option>
<option>香蕉</option>
<option>桔子</option>
<option>牛奶</option>
</select>
<select id="sle02" multiple="multiple" size="10" style="width: 100px;height: 130px" >
<option>芒果</option>
</select>
<br />
<br />
<input type="button" value="全部添加到右侧 >" onclick="selAllRight();">
<input type="button" value="< 全部添加到左侧" onclick="selAllLeft();">
<br />
<br />
<input type="button" value="选中添加到右侧 >" onclick = "selRight();" >
<input type="button" value="< 选中添加到左侧" onclick="selLeft();">
<script type="text/javascript">
var sel1 = document.getElementById("s01");
var sel2 = document.getElementById("sle02");
var op1s = sel1.getElementsByTagName("option");
var op2s = sel2.getElementsByTagName("option");
function selAllRight() {
for (var i = 0 ;i < op1s.length;i++){
var op = op1s[i];
sel2.appendChild(op);
i--;
}
}
function selAllLeft() {
for (var i = 0 ;i < op2s.length;i++){
var op = op2s[i];
sel1.appendChild(op);
i--;
}
}
function selRight() {
for (var i = 0 ;i < op1s.length;i++){
var op = op1s[i];
if (op.selected == true){
sel2.appendChild(op);
i--;
}
}
}
function selLeft() {
for (var i = 0 ;i < op2s.length;i++){
var op = op2s[i];
if (op.selected == true){
sel1.appendChild(op);
i--;
}
}
}
//==================================================================================
function check(brown) {
document.getElementById("loveInter").value=brown;
}
</script>
</body>
</html>