Ajax <select>标签的应用向左移动，向右移动
发布时间：2020-12-16 00:49:34 所属栏目：百科 来源：网络整理
导读：select标签属性 selectedIndex:该下标返回下拉表总的索引值 注：如果有多个被选中的情况下，永远返回第一个被选中的索引值，索引最小的那个 如果没有选中的情况下，返回-1 %@ page language = "java" contentType = "text/html; charset=UTF-8" pageEncoding
|
<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
>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |