js实现请选择
实现 JavaScript 选择功能的方法
方法一：使用 <select> 和 <option> 元素
通过 HTML 的 <select> 元素创建下拉选择框，搭配 <option> 定义选项：
<select id="mySelect">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>通过 JavaScript 获取选中值：
const selectElement = document.getElementById('mySelect');
selectElement.addEventListener('change', (event) => {
console.log(event.target.value); // 输出选中项的 value
});方法二：动态生成选项
通过 JavaScript 动态添加选项到 <select> 元素：
const selectElement = document.getElementById('mySelect');
const options = ['选项A', '选项B', '选项C'];
options.forEach((text, index) => {
const option = document.createElement('option');
option.value = `dynamic_${index}`;
option.textContent = text;
selectElement.appendChild(option);
});方法三：自定义选择框
通过 <div> 和 CSS 模拟选择框，增强 UI 灵活性：
<div class="custom-select">
<div class="selected-option" onclick="toggleOptions()">请选择</div>
<div class="options">
<div onclick="selectOption('opt1', '选项1')">选项1</div>
<div onclick="selectOption('opt2', '选项2')">选项2</div>
</div>
</div>JavaScript 控制逻辑：
function toggleOptions() {
document.querySelector('.options').classList.toggle('active');
}
function selectOption(value, text) {
const selected = document.querySelector('.selected-option');
selected.textContent = text;
selected.dataset.value = value;
toggleOptions();
}方法四：使用第三方库
例如通过 Select2 库增强选择功能：
<select id="enhancedSelect">
<option>选项X</option>
<option>选项Y</option>
</select>初始化脚本：
$('#enhancedSelect').select2();注意事项
- 原生
<select>兼容性最好但样式受限 - 自定义选择框需处理无障碍访问（ARIA 属性）
- 动态选项需注意内存管理，避免重复添加
