如图所示：左右两个select标签，左边有10个option， 要求实现双击左侧选项即可移动到右侧，选择选项后点击“批量右移”可以移动到右侧，点击“全部右移”则全部一次性右移到右侧。  实现代码如下：
<div id="" style="position: absolute;left: 10px;top: 20px;">
<select style="width: 70px;" id="leftID" size="10" multiple="multiple" >
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
<option value="">D</option>
<option value="">E</option>
<option value="">F</option>
<option value="">G</option>
<option value="">H</option>
<option value="">I</option>
<option value="">J</option>
</select>
</div>
<div id="" style="position: absolute;left: 100px;top: 60px;">
<input type="button" name="rightMoveID" id="rightMoveID" value="批量右移" />
</div>
<div id="" style="position: absolute;left: 100px;top: 90px;">
<input type="button" name="rightMoveAllID" id="rightMoveAllID" value="全部右移" />
</div>
<div id="" style="position: absolute;left: 200px;top: 20px;">
<select style="width: 70px;" id="rightID" size="10" multiple="multiple"></select>
</div>
<script type="text/javascript">
document.getElementById("leftID").ondblclick = function() {
var optionElement = this[this.selectedIndex];
document.getElementById("rightID").appendChild(optionElement) ;
}
document.getElementById("rightMoveAllID").onclick = function() {
var leftSelectElement = document.getElementById("leftID") ;
var size = leftSelectElement.length;
for(var i=0;i<size;i++) {
var optionElement = leftSelectElement.options[0] ;
document.getElementById("rightID").appendChild(optionElement) ;
}
}
document.getElementById("rightMoveID").onclick = function(){
var selectElement = document.getElementById("leftID") ;
var optionElements = selectElement.getElementsByTagName("option") ;
for(var i=0;i<optionElements.length;i++) {
if(optionElements[i].selected == true) {
document.getElementById("rightID").appendChild(optionElements[i]) ;
i=i-1;//解释为什么要减一，
//每次移动那个option后，那个option就会被删除，
//所以需要把index移动到被删除的那个option的前一个index那里才可以。
}
}
}
</script>
|
