JavaScript 는 두 개의 select 드 롭 다운 상자 옵션 을 왼쪽 에서 오른쪽으로 이동 합 니 다.
5598 단어 js드 롭 다운 프레임이동 하 다.
자 바스 크 립 트 코드
<script type="text/javascript">
/** **/
function moveRight()
{
// select
var selectElement = document.getElementById("first");
var optionElements = selectElement.getElementsByTagName("option");
var len = optionElements.length;
if(!(selectElement.selectedIndex==-1)) // ， selectedIndex -1
{
// select
var selectElement2 = document.getElementById("secend");
//
for(var i=0;i<len ;i++)
{
selectElement2.appendChild(optionElements[selectElement.selectedIndex]);
}
} else
{
alert(" ！");
}
}
//
function moveAll()
{
// select
var selectElement = document.getElementById("first");
var optionElements = selectElement.getElementsByTagName("option");
var len = optionElements.length;
//alert(len);
// selected
var firstOption = new Array();
for(var k=len-1;k>=0;k--)
{
firstOption.push(optionElements[k]);
}
var lens = firstOption.length;
// select
var selectElement2 = document.getElementById("secend");
for(var j=lens-1;j>=0;j--)
{
selectElement2.appendChild(firstOption[j]);
}
}
//
function moveLeft()
{
// select
var selectElement = document.getElementById("secend");
var optionElement = selectElement.getElementsByTagName("option");
var len = optionElement.length;
//
if(!(selectElement.selectedIndex==-1))
{
var firstSelectElement = document.getElementById("first");
for(i=0;i<len;i++)
{
firstSelectElement.appendChild(optionElement[selectElement.selectedIndex]);//
}
}else
{
alert(" !");
}
}
//
function moveAllLeft()
{
var selectElement = document.getElementById("secend");
var optionElements = document.getElementsByTagName("option");
var len = optionElements.length;
var optionEls = new Array();
for(var i=len-1;i>=0;i--)
{
optionEls.push(optionElements[i]);
}
var lens = optionEls.length;
var firstSelectElement = document.getElementById("first");
for(var j=lens-1;j>=0;j--)
{
firstSelectElement.appendChild(optionEls[j]);
}
}
</script>Html 코드
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.select_move { margin:0px auto; width:206px; height:140px; margin-top:300px;}
.select_move_1 { float:left;}
.select_move_2 { float:left;}
.select_move_3 { float:left;}
</style>
</head>
<body>
<div class="select_move">
<div class="select_move_1">
<select name="first" size="10" id="first" multiple="multiple">
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
</select>
</div>
<div class="select_move_2">
<input type="button" value="------>" onclick="moveRight()"/><br />
<input type="button" value="===>" onclick="moveAll()" /><br />
<input type="button" value="<------" onclick="moveLeft()"/><br />
<input type="button" value="<===" onclick="moveAllLeft()"/>
</div>
<div class="select_move_3">
<select size="10" id="secend" multiple="multiple">
</select>
</div>
</div>
</body>
</html> 이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
