이 기사에서는 왼쪽과 오른쪽에 데이터를 교환하기 위해 두 개의 목록 상자를 제어하는 JavaScript 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
우리는 종종이 기능을 사용하여 왼쪽 목록 상자의 모든 요소를 오른쪽으로 이동하거나 오른쪽 목록 상자의 모든 요소를 왼쪽으로 이동하거나 오른쪽 목록 상자의 모든 요소를 왼쪽으로 이동하거나 한 번에 이동할 수 있습니다.
코드 사본은 다음과 같습니다. 함수 listbox_movecross (sourceId, destid) {
var src = document.getElementById (sourceId);
var dest = document.getElementById (destid);
for (var count = 0; count <src.options.length; count ++) {
if (src.options [count] .selected == true) {
var 옵션 = src.options [count];
var newOption = document.createElement ( "옵션");
newOption.Value = 옵션. 값;
newOption.text = 옵션 .text;
newOption.selected = true;
노력하다 {
dest.add (newoption, null); //기준
src.remove (count, null);
} catch (오류) {
dest.add (newoption); // 예를 들어
src.remove (count);
}
세다--;
}
}
}
// ..
Listbox_MoveCross ( 'CountryList', 'SelectedCountryList');
아래는 브라우저에서 직접 실행할 수있는 데모 효과 코드입니다.
다음과 같이 코드를 복사하십시오. 아래 버튼을 클릭하여 선택한 옵션을 오른쪽 또는 왼쪽으로 이동하십시오. <br>
<테이블>
<tbody> <tr>
<td>
<select id = "sourceSelect"size = "10"multiple = "">
<옵션 값 = "a"> 아프가니스탄 </옵션>
<옵션 값 = "B"> 바하마 </옵션>
<옵션 값 = "C"> 바베이도스 </옵션>
<옵션 값 = "d"> 벨기에 </옵션>
<옵션 값 = "e"> 부탄 </옵션>
<옵션 값 = "F"> 중국 </옵션>
<옵션 값 = "g"> 크로아티아 </옵션>
<옵션 값 = "h"> 덴마크 </옵션>
<옵션 값 = "i"> 프랑스 </옵션>
</선택>
</td>
<td>
<button onclick = "ListBoxMoveCross ( 'sourceSelect', 'detSelect');">>>> </button> <br>
<button onclick = "listboxMoveCross ( 'destStelect', 'sourcesElect');"> <<</button>
</td>
<td>
<select id = "deMatselect"size = "10"multiple = "">
<옵션 값 = "a"> 아프가니스탄 </옵션>
<옵션 값 = "B"> 바하마 </옵션>
<옵션 값 = "C"> 바베이도스 </옵션>
<옵션 값 = "d"> 벨기에 </옵션>
<옵션 값 = "e"> 부탄 </옵션>
<옵션 값 = "F"> 중국 </옵션>
<옵션 값 = "g"> 크로아티아 </옵션>
<옵션 값 = "h"> 덴마크 </옵션>
<옵션 값 = "i"> 프랑스 </옵션>
</선택>
</td>
</tr>
</tbody> </table>
<cript>
함수 listboxMoveCross (sourceId, destid) {
var src = document.getElementById (sourceId);
var dest = document.getElementById (destid);
for (var count = 0; count <src.options.length; count ++) {
if (src.options [count] .selected == true) {
var 옵션 = src.options [count];
var newOption = document.createElement ( "옵션");
newOption.Value = 옵션. 값;
newOption.text = 옵션 .text;
newOption.selected = true;
노력하다 {
dest.add (newoption, null); //기준
src.remove (count, null);
} catch (오류) {
dest.add (newoption); // 예를 들어
src.remove (count);
}
세다--;
}
}
}
</스크립트>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.