Ajax <select>标签的应用向左移动，向右移动

<select>标签属性 selectedIndex:该下标返回下拉表总的索引值

注：如果有多个被选中的情况下，永远返回第一个被选中的索引值，索引最小的那个

如果没有选中的情况下，返回-1

<%@ page language = "java" contentType = "text/html; charset=UTF-8"

pageEncoding = "UTF-8" %>

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

< html >

< head >

< Meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >

< title > Insert title here </ title >

</ head >

< body >

< table >

< td >

< select size = "12" multiple = "multiple" id = "first" name = "first" >

< option value = "选项1" > 选项1 </ option >

< option value = "选项2" > 选项2 </ option >

< option value = "选项3" > 选项3 </ option >

< option value = "选项4" > 选项4 </ option >

< option value = "选项5" > 选项6 </ option >

< option value = "选项7" > 选项7 </ option >

< option value = "选项8" > 选项8 </ option >

< option value = "选项9" > 选项9 </ option >

< option value = "选项10" > 选项10 </ option >

</ select >

</ td >

< input type = "button" value = "---->" id = "add" name = "add" class = "button" />< br >

< input type = "button" value = "====>" id = "addAll" name = "addAll" class = "button" />< br >

< input type = "button" value = " < ----" id = "remove" name = "remove" class = "button" />< br >

< input type = "button" value = " < ====" id = "removeAll" name = "removeAll" class = "button" />< br >

< select size = "12" multiple = "multiple" id = "seconde" name = "seconde" >

< option value = "选项11" > 选项11 </ option >

</ table >

</ body >

< script type = "text/javascript" >

var firstSelect=document.getElementById( "first" );

var secondeSelect=document.getElementById( "seconde" );

var firstOptionElements=firstSelect.getElementsByTagName( "option" );

var secondeOptionElements=secondeSelect.getElementsByTagName( "option" );

/*************************************从左向右移动选中项************************************************************/

document.getElementById( "add" ).onclick= function (){

var firstOptionLength=firstOptionElements.length;

for ( var i=0;i < firstOptionLength;i++){

if (firstSelect.selectedIndex!= - 1){

secondeSelect.appendChild(firstOptionElements[firstSelect.selectedIndex]);

}

};

/***********************************从左向右点击按钮全部移动*******************************************************/

document.getElementById( "addAll" ).onclick= function (){

secondeSelect.appendChild(firstOptionElements[0]);

/***********************************从左向右双击移动****************************************************************/

document.getElementById( "first" ).ondblclick= function (){

/*************************************从右向左移动选中项************************************************************/

document.getElementById( "remove" ).onclick= function (){

var length=secondeOptionElements.length;

for ( var i=0;i < length;i++){

if (secondeSelect.selectedIndex!= - 1){

firstSelect.appendChild(secondeOptionElements[secondeSelect.selectedIndex]);

/**********************************从右向左点击按钮全部移动*******************************************************/

document.getElementById( "removeAll" ).onclick= function (){

firstSelect.appendChild(secondeOptionElements[0]);

/***********************************从右向左双击移动****************************************************************/

document.getElementById( "seconde" ).ondblclick= function (){

</ script >

</ html >

Ajax <select>标签的应用向左移动，向右移动

猜你在找的Ajax相关文章