使用 JavaScript 制作下拉框：使用 HTML 创建下拉框框架。使用 JavaScript 获取下拉框元素。添加新选项、移除选项和设置默认值。添加事件侦听器以响应选择值的变化。
如何用 JavaScript 制作下拉框
使用 HTML 创建下拉框：
第一步是使用 HTML 创建下拉框的框架：
<code class="html"><select id="my-dropdown"> <option value="1">选项 1</option> <option value="2">选项 2</option> <option value="3">选项 3</option> </select></code>
用 JavaScript 操纵下拉框：
接下来，可以使用 JavaScript 来获取和修改下拉框。
1. 获取下拉框元素：
<code class="javascript">const dropdown = document.getElementById("my-dropdown");</code>2. 添加新的选项：
<code class="javascript">const newOption = document.createElement("option");
newOption.value = "4";
newOption.textContent = "选项 4";
dropdown.appendChild(newOption);</code>3. 移除选项：
<code class="javascript">const optionToRemove = dropdown.querySelector("option[value='2']");
dropdown.removeChild(optionToRemove);</code>4. 设置默认值：
<code class="javascript">dropdown.value = "3";</code>
5. 添加事件侦听器：
可以使用 addEventListener() 方法来添加一个事件侦听器，当下拉框的值更改时触发它。
<code class="javascript">dropdown.addEventListener("change", function() {
console.log(`新选定的值是：${this.value}`);
});</code>示例：
以下是一个完整的示例，展示了如何使用 JavaScript 创建和操纵一个下拉框：
<code class="html"><select id="my-dropdown">
<option value="1">选项 1</option>
<option value="2">选项 2</option>
<option value="3">选项 3</option>
</select>
<script>
const dropdown = document.getElementById("my-dropdown");
dropdown.addEventListener("change", function() {
console.log(`新选定的值是：${this.value}`);
});
// 添加新选项
const newOption = document.createElement("option");
newOption.value = "4";
newOption.textContent = "选项 4";
dropdown.appendChild(newOption);
</script></code> 
