JavaScript为你的网站增加了动态行为，你可以创建各种下拉菜单、导航条、动画，并处理页面对每次点击的反应。这使得网页具有互动性，并为网站添加了 "生命"。
许多开发者依靠Bootstrap来实现这些目的，因为它带有内置的组件，可以很容易地重复使用，并提高开发者的工作效率，但在跳入使用可重复使用的组件之前，首先了解每个东西如何独立工作是很重要的。在这篇文章中，我们将讨论如何使用JavaScript创建一个下拉菜单。
使用JavaScript的下拉菜单
我们都见过下拉菜单，并在填写各种在线表格时使用它们来选择一个特定的城市、州或简单地从提供给我们的一堆下拉选项中选择。
这些是可切换的菜单，由多个选项组成，用户可以从中选择一个特定的选项。这些选项既可以在HTML列表中定义，也可以在JavaScript中定义为一个数组，而且它们与一个函数相关。每当用户点击一个选项时，该函数就会被触发并发生相应的动作。
创建下拉菜单的要点
你可以通过使用**标签和**标签的HTML列表来创建一个简单的下拉菜单。为列表提供一个ID，在JavaScript中用来获取用户选择的选项。 你可以创建一个更复杂的下拉菜单，主要使用JavaScript，再加上一点HTML。选项将被定义为JavaScript中的一个数组。 让我们通过代码来更好地理解每个选项。 简单的下拉菜单 首先，在HTML中创建一个列表，在表单标签中提供一些id，这里我们提供 "选项 "作为id。 选项被定义在每个标签中，并在改变时调用一个函数。 这个函数在JavaScript中被定义为 "dropdownMenu()"，当选项被选中时就会触发。 最后是创建一个ID为 "city "的输入，用户在其中选择选项。 <html> <head> <title>Simple Dropdown Menu</title> </head> <script> function dropdownMenu() { var list = document.getElementById("option"); document.getElementById("city").value = list.options[list.selectedIndex].text; } </script> <body> <form> <b> Select your City from the list</b> <select id = "option" onchange = "dropdownMenu()" > <option> ---Choose City--- </option> <option> New York </option> <option> Amsterdam </option> <option> Paris </option> <option> London </option> </select> <p> Your selected city is: <input type = "text" id = "city" size = "20" </p> </form> </body> </html> 输出。 使用div和JavaScript的下拉菜单 首先，在HTML标签中创建两个div，触发函数并在屏幕上显示菜单。 在JavaScript中把列表定义为一个数组，并使用documnet.createElement()方法在JavaScript中以编程方式创建一个下拉列表 然后调用appendChild()方法，将下拉菜单附加到列表的末尾。 <html> <body> <div id="list"></div> <br> <div> <button id="show">Show the list</button> </div> </body> </html> <script> document.getElementById('show').onclick = function() { var items = ["New York", "Amsterdam", "Paris", "London"]; var select = document.createElement("select"); select.name = "city"; select.id = "city" for (const val of items) { var option = document.createElement("option"); option.value = val; option.text = val.charAt(0).toUpperCase() + val.slice(1); select.appendChild(option); } var label = document.createElement("label"); label.innerHTML = "Select your City from the list: " label.htmlFor = "city"; document.getElementById("list").appendChild(label).appendChild(select); } </script> 输出。 结论 JavaScript用于在网页上创建各种互动元素，以增加页面的动态行为。在这篇文章中，我们用代码在JavaScript中创建了一个下拉菜单。首先，我们用HTML创建了一个简单的下拉菜单，并通过JavaScript调用函数，然后我们把它复杂化，用JavaScript和少量的HTML创建了下拉菜单。项目被定义为一个数组，下拉菜单是用内置方法创建的。为了让你更好地理解，我们提供了这两方面的代码。
