드롭다운 목록을 만들기 전에 드롭다운 목록이 무엇인지 아는 것이 중요합니다. 드롭다운 목록은 사용자가 여러 옵션 중에서 하나를 선택할 수 있도록 하는 전환 가능한 메뉴입니다. 이 목록의 옵션은 기능과 관련된 코딩에서 정의됩니다. 이 옵션을 클릭하거나 선택하면 해당 기능이 트리거되어 수행을 시작합니다.
드롭다운 메뉴에서 주나 도시를 선택하기 위해 등록 양식에서 대부분의 경우 드롭다운 목록을 보셨을 것입니다. 드롭다운 목록을 사용하면 항목 목록에서 하나만 선택할 수 있습니다. 드롭다운 목록이 어떻게 보이는지 아래 스크린샷을 참조하세요.
드롭다운 목록 작성 시 중요 사항
- 탭은 HTML에서 간단한 드롭다운 목록을 생성하기 위해 탭과 함께 사용됩니다. 그 후 JavaScript는 이 목록으로 작업을 수행하는 데 도움이 됩니다.
- 이 외에도 컨테이너 탭을 사용하여 드롭다운 목록을 만들 수 있습니다. 그 안에 드롭다운 항목과 링크를 추가합니다. 이 장에서는 예를 들어 각 방법을 설명하겠습니다.
- 다음과 같은 요소를 사용할 수 있습니다. , 또는
드롭다운 메뉴를 엽니다.
다양한 방법을 사용하여 드롭다운 목록을 만들려면 아래 예를 참조하세요.
예
탭을 사용한 간단한 드롭다운 목록
복잡한 사용법을 사용하지 않고 간단하고 쉽게 드롭다운 목록을 만드는 간단한 예입니다. 자바스크립트 코드와 CSS 스타일시트.
코드 복사
dropdown menu using select tab function favTutorial() { var mylist = document.getElementById('myList'); document.getElementById('favourite').value = mylist.options[mylist.selectedIndex].text; } <b> Select you favourite tutorial site using dropdown list </b> ---Choose tutorial--- w3schools Javatpoint tutorialspoint geeksforgeeks <p> Your selected tutorial site is: <input type="text" id="favourite" size="20" < p> </p> 지금 테스트해보세요 산출
위의 코드를 실행하면 주어진 스크린샷과 동일한 응답을 받게 됩니다. 여기에는 튜토리얼 사이트 목록이 있는 드롭다운 메뉴가 포함됩니다.
C# 샘플 코드
드롭다운 목록에서 하나의 항목을 클릭하여 선택합니다.
아래 스크린샷에서 선택한 항목이 출력 필드에 표시되었음을 확인하세요.
드롭다운 목록은 다른 방법을 사용하여 만들 수 있습니다. 아래 예를 더 참조하세요.
버튼과 div 탭을 사용한 드롭다운 목록
이 예에서는 드롭다운 메뉴로 항목 목록이 있는 버튼이 있는 드롭다운 목록을 만듭니다.
android.process.acore가 계속 중지됩니다.
코드 복사
dropdown menu using button /* set the position of dropdown */ .dropdown { position: relative; display: inline-block; } /* set the size and position of button on web */ .button { padding: 10px 30px; font-size: 15px; } /* provide css to background of list items */ #list-items { display: none; position: absolute; background-color: white; min-width: 185px; } /* provide css to list items */ #list-items a { display: block; font-size: 18px; background-color: #ddd; color: black; text-decoration: none; padding: 10px; } //show and hide dropdown list item on button click function show_hide() { var click = document.getElementById('list-items'); if(click.style.display ==='none') { click.style.display ='block'; } else { click.style.display ='none'; } } Choose Language <a href="#"> Hindi </a> <a href="#"> English </a> <a href="#"> Spanish </a> <a href="#"> Chinese </a> <a href="#"> Japanese </a> 지금 테스트해보세요 산출
이 드롭다운 버튼을 클릭하면 해당 목록에서 하나의 항목을 선택해야 하는 항목 목록이 표시됩니다. 아래 스크린샷을 참조하세요.
다음을 클릭하세요. 드롭 다운 목록 버튼을 누르고 목록을 숨깁니다.
다중 드롭다운 목록 예
위의 예에서는 단일 드롭다운 목록을 만들었습니다. 이제 다음과 같은 다양한 온라인 기술 주제 튜토리얼 목록의 여러 드롭다운 메뉴가 있는 양식을 생성하겠습니다. 씨 , C++ , PHP , MySQL , 그리고 자바 , 여러 카테고리로 분류됩니다. 사용자가 특정 드롭다운 버튼을 클릭하면 해당 드롭다운 목록이 열립니다.
수행 방법은 아래 예를 참조하세요.
.dropbtn { background-color: green; color: white; padding: 14px; font-size: 16px; cursor: pointer; } .dropbtn:hover { background-color: brown; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: white; min-width: 140px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover { background-color: #ddd; } .show { display: block; } <h2>List of tutorials using Dropdown menu</h2> <p>Click on the button to open the tutorial dropdown menu.</p> Programming <a href="#java">Java</a> <a href="#python">Python</a> <a href="#c++">C++</a> <a href="#c">C</a> Database <a href="#mysql">MySQL</a> <a href="#mdb">MongoDB</a> <a href="#cass">Cassandra</a> Web Technology <a href="#php">PHP</a> <a href="#css">CSS</a> <a href="#js">JavaScript</a> /* methods to hide and show the dropdown content */ function programmingList() { document.getElementById('myDropdown1').classList.toggle('show'); } function databaseList() { document.getElementById('myDropdown2').classList.toggle('show'); } function WebTechList() { document.getElementById('myDropdown3').classList.toggle('show'); } /* methods to redirect to tutorial page that user will select from dropdown list */ function java() { window.location.replace('https://www.javatpoint.com/java-tutorial'); } function python() { window.location.replace('https://www.javatpoint.com/python-tutorial'); } function cpp() { window.location.replace('https://www.javatpoint.com/cpp-tutorial'); } function c() { window.location.replace('https://www.javatpoint.com/c-programming-language-tutorial'); } function mysql() { window.location.replace('https://www.javatpoint.com/mysql-tutorial'); } function mDB() { window.location.replace('https://www.javatpoint.com/mongodb-tutorial'); } function cassandra() { window.location.replace('https://www.javatpoint.com/cassandra-tutorial'); } function php() { window.location.replace('https://www.javatpoint.com/php-tutorial'); } function css() { window.location.replace('https://www.javatpoint.com/css-tutorial'); } function js() { window.location.replace('https://www.javatpoint.com/javascript-tutorial'); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName('dropdown-content'); var i; for (i = 0; i <dropdowns.length; i++) { var opendropdown="dropdowns[i];" if (opendropdown.classlist.contains('show')) opendropdown.classlist.remove('show'); } < pre> <span> Test it Now </span> <p> <strong>Output</strong> </p> <p>On executing the above code, a form with three dropdown buttons will appear. Each dropdown button has a list of items.</p> <img src="//techcodeview.com/img/javascript-tutorial/55/how-create-dropdown-list-using-javascript-5.webp" alt="How to create dropdown list using JavaScript"> <p>Click on any of the dropdown button to see the list of items.</p> <img src="//techcodeview.com/img/javascript-tutorial/55/how-create-dropdown-list-using-javascript-6.webp" alt="How to create dropdown list using JavaScript"> <p>Let you click on MongoDB under database tutorial, it will redirect you to our javatpoint MongoDB tutorial . See the output below:</p> <img src="//techcodeview.com/img/javascript-tutorial/55/how-create-dropdown-list-using-javascript-7.webp" alt="How to create dropdown list using JavaScript"> <h4>Note: if you click outside the dropdown window, the dropdown list will be disappeared.</h4> <p>Usually, a dropdown menu is created to categories the items of the same type. Means the list of similar type of items. It is much similar to the tutorial website, which has several lists of our javatpoint subject tutorials.</p> <hr></dropdowns.length;>