Listbox Listbox에서 항목의 위아래 이동을 제어하는 JavaScript 메소드

저자：Eve Cole 업데이트 시간：2025-06-04 06:00:02

이 기사에서는 ListBox 목록 상자에서 항목의 위아래 이동을 제어하기위한 JavaScript 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.

이 JS 코드는 ListBox의 요소를 제어하여 위 또는 아래로 이동할 수 있습니다. 이는 매우 유용합니다. 아래는 세부 코드입니다

코드 사본은 다음과 같습니다. 함수 listbox_move (listid, direction) {

var listbox = document.getElementById (listId);

var selindex = listbox.selectedIndex;

if (-1 == selindex) {

경고 ( "이동 옵션을 선택하십시오.");

반품;

}

var 증분 = -1;

if (Direction == 'up')

증분 = -1;

또 다른

증분 = 1;

if ((selindex + ycrement) <0 ||

(selindex + ycrement)> (listbox.options.length-1)) {

반품;

}

var selvalue = listbox.options [selindex] .Value;

var seltext = listbox.options [selindex] .text;

listbox.options [selindex] .value = listbox.options [selindex + ycrement] .Value

listbox.options [selindex] .text = listbox.options [selindex + ycrement] .text

listbox.options [selindex + ycrement] .Value = selvalue;

listbox.options [selindex + ycrement] .text = seltext;

listbox.selectedIndex = selindex + 증분;

}

// ..

listbox_move ( 'CountryList', 'Up'); // 선택한 옵션을 위로 올리십시오

listbox_move ( 'CountryList', 'down'); // 선택한 옵션을 아래로 이동하십시오

아래는 브라우저에서 사용할 수있는 자세한 데모 코드입니다.

다음과 같이 코드를 복사하십시오. 아래 버튼을 클릭하여 선택 상자에서 모든 옵션을 선택하거나 선택 해제하십시오. <br>

<id = "lsbox"name = "lsbox"size = "10"multure = "">를 선택하십시오

<옵션 값 = "1"> 인도 </옵션>

<옵션 값 = "2"> 미국 </옵션>

<옵션 값 = "3"> 중국 </옵션>

<옵션 값 = "4"> 이탈리아 </옵션>

<옵션 값 = "5"> 독일 </옵션>

<옵션 값 = "6"> 캐나다 </옵션>

<옵션 값 = "7"> 프랑스 </옵션>

<옵션 값 = "8"> 영국 </옵션>

</선택> <br>

<버튼 onclick = "ListBoxMove ( 'lsbox', 'up');"> 위로 이동 </button>

<버튼 onclick = "ListBoxMove ( 'lsbox', 'down');"> 아래로 이동 </button>

<cript>

함수 listboxMove (listID, Direction) {