두 개의 목록 상자를 제어하여 왼쪽과 오른쪽 데이터를 교환하는 JavaScript 방법

두 개의 목록 상자를 제어하여 왼쪽과 오른쪽 데이터를 교환하는 JavaScript 방법_javascript 기술

WBOY

풀어 주다： 2016-05-16 16:08:38

원래의

1729명이 탐색했습니다.

이 기사의 예에서는 JavaScript가 두 목록 상자 간의 데이터 교환을 제어하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

왼쪽 목록 상자의 요소를 오른쪽으로 이동하거나, 오른쪽 목록 상자의 요소를 왼쪽으로 이동할 때 이 기능을 자주 사용합니다

코드 복사 코드는 다음과 같습니다.

function listbox_moveacross(sourceID, destID) {

var src = document.getElementById(sourceID);

var dest = document.getElementById(destID);

for(var count=0; count 
If(src.options[count].selected == true) {

              var 옵션 = src.options[count];

              var newOption = document.createElement("option");

newOption.value = 옵션.값;

newOption.text = option.text;

newOption.selected = true;

                  시도해 보세요 {

~ >
                         src.remove(count, null);

                      }catch(오류) {

                            dest.add(newOption) // IE 전용

                         src.remove(count);

                 }

백작--;

}

}

}

//..

listbox_moveacross('countryList', 'selectedCountryList');

다음은 이와 같은 데모 효과 코드로, 브라우저에서 직접 실행할 수 있습니다

코드 복사 코드는 다음과 같습니다.

선택한 옵션을 오른쪽이나 왼쪽으로 이동하려면 아래 버튼을 클릭하세요.

<테이블>
<본체>





함수 listboxMoveacross(sourceID, destID) {
    var src = document.getElementById(sourceID);
    var dest = document.getElementById(destID);
    for(var count=0; count         if(src.options[count].selected == true) {
                var 옵션 = src.options[count];
                var newOption = document.createElement("option");
                newOption.value = 옵션.값;
                newOption.text = option.text;
                newOption.selected = true;
                시도해보세요 {
                         dest.add(newOption, null); //표준
                         src.remove(count, null);
                 }catch(오류) {
                         dest.add(newOption); // IE 전용
                         src.remove(개수);
                 }
                카운트--;
        }
    }
}

希望本文所述对大家의 javascript는 程序设计有所帮助。