ドロップダウン リストの作成を開始する前に、ドロップダウン リストとは何かを理解しておくことが重要です。ドロップダウン リストは、ユーザーが複数のオプションから 1 つを選択できる切り替え可能なメニューです。このリストのオプションはコーディングで定義され、関数に関連付けられます。このオプションをクリックまたは選択すると、その機能がトリガーされ、実行が開始されます。
登録フォームではほとんどの場合、ドロップダウン メニューから州または都市を選択するドロップダウン リストを見たことがあるでしょう。ドロップダウン リストを使用すると、項目のリストから 1 つだけを選択できます。ドロップダウン リストがどのように表示されるかは、以下のスクリーンショットを参照してください。
ドロップダウンリスト作成の注意点
- タブは、HTML で単純なドロップダウン リストを作成するためにタブとともに使用されます。その後、JavaScript はこのリストを使用して操作を実行するのに役立ちます。
- これ以外に、コンテナ タブを使用してドロップダウン リストを作成することもできます。ドロップダウン項目とその中にリンクを追加します。この章では、例を挙げて各方法について説明します。
- などの任意の要素を使用できます。 、 または
をクリックしてドロップダウン メニューを開きます。
さまざまな方法を使用してドロップダウン リストを作成するには、以下の例を参照してください。
アルゴリズムのバブルソート
例
タブを使用したシンプルなドロップダウン リスト
複雑な操作を行わずに、シンプルで簡単なドロップダウン リストを作成する単純な例です。 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> 今すぐテストしてください 出力
上記のコードを実行すると、指定されたスクリーンショットと同じ応答が得られます。これには、チュートリアル サイトのリストが含まれるドロップダウン メニューが含まれます。
ドロップダウン リストから 1 つの項目をクリックして選択します。
以下のスクリーンショットでは、選択した項目が出力フィールドに表示されていることがわかります。
Javaで文字列を比較する
ドロップダウン リストは、他の方法でも作成できます。以下の例を参照してください。
ボタンと div タブを使用したドロップダウン リスト
この例では、ドロップダウン メニューとして項目のリストを持つボタンを備えたドロップダウン リストを作成します。
コードをコピーする
Javaのカスタマイズされた例外
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> 今すぐテストしてください 出力
このドロップダウン ボタンをクリックすると、項目のリストが表示され、そのリストから項目を 1 つ選択する必要があります。以下のスクリーンショットを参照してください。
クリックしてください ドロップダウンリスト ボタンを押してリストを非表示にします。
複数のドロップダウン リストの例
上記の例では、単一のドロップダウン リストを作成しました。次に、次のようなさまざまなオンライン技術主題チュートリアル リストの複数のドロップダウン メニューを含むフォームを作成します。 C 、 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;>