JavaScript는 왼쪽과 오른쪽으로 이동하는 두 가지 선택 드롭다운 상자 옵션을 구현합니다.

이 글에서는 두 개의 선택 드롭다운 상자 옵션의 왼쪽 및 오른쪽 이동을 구현하는 JavaScript 코드를 소개합니다. 관심 있는 학생은 이 글을 참고하세요.

오늘은 할 일이 없고 두 개의 선택 드롭다운 상자를 사용하는 js를 작성했습니다. 저는 이제 막 작은 프로그램을 위한 JavaScript를 배우기 시작했는데 아직 최적화할 영역이 많이 남아 있습니다.

자바스크립트 코드

위는 자바스크립트 코드이고, 다음은 html과 css 코드입니다.

코드는 다음과 같습니다

//첫 번째 선택 객체 가져오기 varselectElement = document.getElementById("첫 번째"); varoptionElements = selectElement.getElementsByTagName("옵션 "); varlen = optionElements.length; If(!(selectElement.selectedIndex==- 1)) // 선택 요소가 없으면 selectDindex는 -1 { // 두 번째 선택 개체 가져오기 VARSELECTELEMENT2 = DOCUMENT.GetelementByid ("Secend"); // 오른쪽으로 이동                                 ~ ~ 필요한 요소 아직 이동되지 않았습니다! "); } } //모두 오른쪽으로 이동 functionmoveAll() { } //첫 번째 선택 객체 가져오기 varselectElement = document.getElementById ("first"); varoptionElements = selectElement.getElementsByTagName("option"); varlen = optionElements.length; //alert(len); //선택한 첫 번째 항목 변경 배열 뒤집기 in varfirstOption =newArray(); for(vark=len-1;k>=0;k--) } varlens = firstOption.length; //두 번째 선택 개체 가져오기 varselectElement2 = document.getElementById("secend"); for(varj=lens-1;j>=0;j-- ) {le Selectionlement2.appendchild (firstOption [j]) }}} FunctionMoveLeft () { // 먼저 두 번째 초를 가져와서 두 번째 초를 선택하세요. varselectElement = document.getElementB yId("초"); varoptionElement = selectElement.getElementsByTagName("option"); varlen = optionElement.length; //요소 다시 1위 획득 if(!(selectElement.selectedIndex==-1)) { varfirstSelectElement = document.getElementById("first"); for(i=0;i {                                                                                    ,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,, 프로젝트!"); } } //모두 왼쪽으로 이동 functionmoveAllLeft() { varselectElement = document.getElementById("secend"); varoptionElements = document.getElements ByTagName("option"); varlen = optionElements.length; varoptionEls =newArray(); for(vari=len-1;i>=0;i--) varlens = optionEls.length; varfirstSelectElement = 문서 .getElementById("first"); for(varj=lens-1;j>=0;j--) { firstSelectElement.appendChild( optionEls[j]); } }

Html 코드

코드는 다음과 같습니다

.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;} < ; pclass="select_move">                                                                                          ;optionvalue="BMW">Bmw Cadillac                                               ~             페라리 ㅋㅋㅋ                 버튼"value="------>" onclick="moveRight()"/>                                                                                   "moveAll()" />                                                                                             ;selectsize="10"id="secend "multiple="multiple">                                                                                                                관련 권장 사항: JavaScript를 사용하여 왼쪽과 오른쪽으로 이동하는 두 가지 선택 드롭다운 상자 옵션을 구현하는 샘플 코드 공유

위 내용은 JavaScript는 왼쪽과 오른쪽으로 이동하는 두 가지 선택 드롭다운 상자 옵션을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!