찾다

집  >  기사  >  웹 프론트엔드  >  목록 상자 항목을 위아래로 이동하도록 제어하는 ​​JavaScript 방법_javascript 기술

목록 상자 항목을 위아래로 이동하도록 제어하는 ​​JavaScript 방법_javascript 기술

WBOY
WBOY원래의
2016-05-16 16:08:521127검색

이 문서의 예에서는 JavaScript를 사용하여 목록 상자의 항목이 위아래로 이동하도록 제어하는 ​​방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

이 JS 코드는 목록 상자의 요소를 위 또는 아래로 이동하도록 제어할 수 있습니다. 자세한 코드는 다음과 같습니다

코드 복사 코드는 다음과 같습니다.
function listbox_move(listID, 방향) {
var listbox = document.getElementById(listID);
var selIndex = listbox.selectedIndex;
If(-1 == selIndex) {
Alert("이동할 옵션을 선택해주세요.");
         반품;
}
var 증분 = -1;
If(방향 == '위')
증분 = -1;
그 외
증분 = 1;
If((selIndex 증분) (selIndex 증분) > (listbox.options.length-1)) {
         반품;
}
var selValue = listbox.options[selIndex].value;
var selText = listbox.options[selIndex].text;
Listbox.options[selIndex].value = listbox.options[selIndex 증가].value
Listbox.options[selIndex].text = listbox.options[selIndex 증가].text
Listbox.options[selIndex 증분].value = selValue;
Listbox.options[selIndex 증분].text = selText;
Listbox.selectedIndex = selIndex 증분;
}
//..
//..
listbox_move('countryList', 'up'); //선택한 옵션 위로 이동
listbox_move('countryList', 'down'); //선택한 옵션 아래로 이동

아래는 브라우저에서 사용할 수 있는 자세한 데모 코드입니다
코드 복사 코드는 다음과 같습니다.
선택 상자에서 모든 옵션을 선택하거나 선택 취소하려면 아래 버튼을 클릭하세요.