通过js交换下拉框值
包括选中移动和全部移动,保留原数据和不保留原数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉框值左右互换</title>
</head>
<script type="text/javascript">
function climeL() {
var selectL = document.getElementById('left');
var options = selectL.options; //获得是option数组
var selectR = document.getElementById('right');
for (var i = 0; i < options.length; i++) {
var value = options[i]; //分别遍历每一个option
//此处获得的是option类型
if (value.selected) {
var optionR = document.createElement('option');
/* var txt=document.createTextNode(value.value);
optionR.appendChild(txt);
----此方法保留原下拉框的值*/
optionR.appendChild(value);//此方法不保留原下拉框的值
selectR.appendChild(optionR);
}
}
}
function climeLall() {
var selectL = document.getElementById('left');
var options = selectL.options; //获得是option数组
var selectR = document.getElementById('right');
var len=options.length;//获得初始长度
for (var i = 0; i < len ; i++) {
var value = options[0];
//此处获得的是option类型
var optionR = document.createElement('option');
/* var txt=document.createTextNode(value.value);
optionR.appendChild(txt);
----此方法保留原下拉框的值*/
optionR.appendChild(value);//此方法不保留原下拉框的值
selectR.appendChild(optionR);
}
}
function climeR() {
var selectR = document.getElementById('right');
var options = selectR.options; //获得是option数组
var selectL = document.getElementById('left');
for (var i = 0; i < options.length; i++) {
var value = options[i]; //分别遍历每一个option
//此处获得的是option类型
if (value.selected) {
var optionL = document.createElement('option');
/* var txt=document.createTextNode(value.value);
optionL.appendChild(txt);
----此方法保留原下拉框的值*/
optionL.appendChild(value);//此方法不保留原下拉框的值
selectL.appendChild(optionL);
}
}
}
function climeRall(){
var selectR = document.getElementById('right');
var options = selectR.options; //获得是option数组
var selectL = document.getElementById('left');
var len=options.length;//获得初始长度
for (var i = 0; i < len ; i++) {
var value = options[0];
//此处获得的是option类型
var optionL = document.createElement('option');
/* var txt=document.createTextNode(value.value);
optionL.appendChild(txt);
----此方法保留原下拉框的值*/
optionL.appendChild(value);//此方法不保留原下拉框的值
selectL.appendChild(optionL);
}
}
</script>
<body>
<select id="left" multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select id="right" multiple="multiple">
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>
<br>
<button id="bt" onclick="climeL()">></button><!--向右移动左边选中的-->
<button id="bt" onclick="climeR()"><</button><!--向左移动右边选中的-->
<br>
<button id="bt" onclick="climeLall()">>>></button><!--向右移动左边全部的-->
<button id="bt" onclick="climeRall()"><<<</button><!--向左移动右边全部的-->
<div id="div1"></div>
</body>
</html>