지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > js에서 드롭다운 메뉴의 좌우 이동을 구현하는 방법(코드)

js에서 드롭다운 메뉴의 좌우 이동을 구현하는 방법(코드)

不言
풀어 주다： 2018-08-13 17:19:31
원래의
2149명이 탐색했습니다.

이 글의 내용은 js(코드)에서 드롭다운 메뉴의 좌우 이동을 구현하는 방법에 대한 내용입니다. 필요한 친구들이 참고하면 좋을 것 같습니다. .

js에서 드롭다운 메뉴의 좌우 이동을 구현하는 방법(코드)

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //flag标实为全部移动(true) 还是选择性移动(false)
            function mymove(flag,lid,rid){

                var leftobj = document.getElementById(lid);//得到左边select元素对象 
                var rightobj = document.getElementById(rid);//得到右边select元素对象 

                for( var i = 0 ; i < leftobj.options.length ; i++ ){                    if(flag){
                        rightobj.appendChild(leftobj.options[i]);
                        i--;
                    }else{                        if( leftobj.options[i].selected ){
                            rightobj.appendChild(leftobj.options[i]);
                            i--;
                        }
                    }
                }
            }        </script>
    </head>
    <body>
        <input type="button" value="全部左移" onclick="mymove(true,&#39;rightid&#39;,&#39;leftid&#39;)"/>
        <input type="button" value="左移" onclick="mymove(false,&#39;rightid&#39;,&#39;leftid&#39;)"/>
        <input type="button" value="右移" onclick="mymove(false,&#39;leftid&#39;,&#39;rightid&#39;)"/>
        <input type="button" value="全部右移" onclick="mymove(true,&#39;leftid&#39;,&#39;rightid&#39;)"/>


        <hr>
        <select size="6" multiple="multiple" style="width: 50px; height: 120px;" id="leftid">
            <option>武汉</option>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>杭州</option>
            <option>黄石</option>
        </select>

        <select size="6" multiple="multiple" style="width: 50px; height: 120px; margin-left: 100px;" id="rightid">

        </select>


    </body></html>
로그인 후 복사

관련 권장 사항:

jquery에서 연결된 addback() 및 end()를 구현하는 방법(코드)

js에서 템플릿 엔진을 사용하는 예(코드)

jquery 구현 및 잘못된 이미지 미리 로드 사용

위 내용은 js에서 드롭다운 메뉴의 좌우 이동을 구현하는 방법(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
下拉菜单
원천：php.cn
이전 기사：jquery에서 연결된 addback()과 end()를 구현하는 방법(코드) 다음 기사：js를 사용하여 Excel을 내보내고 가져오는 방법은 무엇입니까? js를 사용하여 Excel을 가져오고 내보내는 방법(순수 코드)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
모바일 보기에서 사용자가 링크를 클릭할 때 이 탐색 표시줄을 어떻게 닫을 수 있나요? 사용자가 웹 사이트를 탐색하기 위해 링크를 클릭하면 탐색 표시줄이 닫히지 않습니까? 내비게이션 바를 닫기 위해 각 링크에 클릭 이벤트 리스너를 추가해 보았지만 작...
에서 2024-04-06 19:23:03
0
1
411
숨겨진 측면 패널 표시: 선택됨 애니메이션 햄버거 메뉴를 통해 보기로 전환할 수 있는 탐색 메뉴를 측면 패널에 갖고 싶습니다. JS 없이 CSS만 사용하여 만들고 싶습니다. :checked 의사...
에서 2024-04-06 15:49:33
0
1
319
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
Gmail 및 XOAUTH2를 사용하는 PHPMailer: 현재 새로 고침 토큰이 만료되면 자동으로 새 새로 고침 토큰을 얻는 방법은 무엇입니까? XOAUTH2(PHPMailerWiki)와 함께 Gmail을 사용하는 것과 GmailXOAUTH2와 함께 PHPMailer를 사용하여 이메일을 보내는 방법이 걱정...
에서 2024-04-06 10:14:45
0
1
373
JavaScript 기능은 버튼 클릭에 영향을 주지 않습니다. 인터넷을 검색하고 많은 것을 시도했지만 비교적 간단한 문제에 봉착했습니다. 아래 코드는 내 문제의 전체 범위입니다. <script>//전체 행을 다른 ...
에서 2024-04-05 13:14:53
0
2
1433
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿