JavaScript_javascript 기술을 사용하여 콤보 목록 상자의 요소 이동 효과를 얻는 방법-JS 튜토리얼-php.cn

JavaScript_javascript 기술을 사용하여 콤보 목록 상자의 요소 이동 효과를 얻는 방법

WBOY

풀어 주다： 2016-05-16 15:13:02

원래의

1846명이 탐색했습니다.

먼저 콤보박스와 리스트박스의 차이점을 알려드리겠습니다.

콤보 상자에는 목록 상자와 텍스트 상자의 기능이 포함되어 있습니다

텍스트 상자: 데이터만 입력할 수 있습니다.

목록 상자: 데이터만 선택 가능

콤보 상자: 데이터 입력뿐만 아니라 `

선택도 가능합니다.

애플리케이션 배경: 페이지에 두 개의 목록 상자가 있으며 한 목록 상자의 요소를 다른 목록 상자로 이동해야 합니다.

　 기본 구현 아이디어 :

(1) 두 개의 목록 상자를 초기화하는 init 메소드를 작성합니다.

(2) init 메소드를 호출하기 위해 onload 이벤트를 본문에 추가합니다.

(3) s1에서 선택한 옵션을 s2로 이동하려면 move(s1,s2)를 작성하세요.

(4) s1의 모든 옵션을 s2로 이동하려면 moveAll(s1,s2)를 작성합니다.

　(5) 버튼에 onclick 이벤트를 추가합니다.

자바스크립트 코드는 다음과 같습니다.

<script type="text/javascript" language="javascript">
//对下拉框信息进行初始化
function init() {
for (i = ; i < ; i++) {
var y = document.createElement("option");//增加一个元素option
y.text = '选项' + i;
var x=document.getElementById("s");//根据ID找到列表框
x.add(y, null); //
}
}
//把选中的选项移到另一边
function move(s, s) {
var index = s.selectedIndex;
if (index == -) {
alert("没有选中值");
return;
}
s.length++;
s.options[s.length - ].value = s.options[index].value;
s.options[s.length - ].text = s.options[index].text;//s中当前选中的值赋给s的最后一个元素
s.remove(index);//从s中移除当前元素
}
//把一边的完全移到另一边
function moveAll(s, s) {
if (s.length == ) {
alert("没有可用选择");
return;
}
s.length = s.length + s.length;
for (var i = ; i < s.length; i++) {
s.options[s.length - s.length + i].value = s.options[i].value;
s.options[s.length - s.length + i].text = s.options[i].text;
}
s.length = ;
}
</script>

로그인 후 복사

<본문>코드:

<body onload="init()">
<table>
<tr>
<td><select id="s" size= style="width:"></select></td>
<td><input type="button" name="moveToRight" value=">"
onClick="move(s,s)"> <br>
<br> <input type="button" name="moveAllToRight" value=">>"
onClick="moveAll(s,s)"> <br> <input type="button"
name="moveToLeft" value="<" onClick="move(s,s)"> <br>
<br> <input type="button" name="moveAllToLeft" value="<<"
onClick="moveAll(s,s)"></td>
<td><select id="s" name="s" size= style="width:"></select></td>
</tr>
</table>
</body>

로그인 후 복사

위 콘텐츠는 JavaScript가 콤보 목록 상자의 요소 이동 효과를 어떻게 실현할 수 있는지에 대한 지식을 소개합니다.