在JavaScript中获取多个下拉菜单(<select>
元素)的值,可以通过以下步骤实现:
document.querySelectorAll
或document.getElementById
等方法来选择页面上的元素。id
或相同的class
。<select id="select1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="select2">
<option value="A">Option A</option>
<option value="B">Option B</option>
</select>
<button onclick="getSelectedValues()">Get Values</button>
function getSelectedValues() {
// 获取单个下拉菜单的值
const select1 = document.getElementById('select1');
const select2 = document.getElementById('select2');
const value1 = select1.value;
const value2 = select2.value;
console.log('Selected values:', value1, value2);
// 如果有多个下拉菜单,可以使用类选择器
const selects = document.querySelectorAll('.select-class');
selects.forEach(select => {
console.log(select.id, select.value);
});
}
id
或class
选择器错误,或者JavaScript代码在DOM元素加载前执行。DOMContentLoaded
事件中,或者放在HTML文档的底部。class
或正确的id
。通过以上步骤和示例代码,你可以轻松获取多个下拉菜单的值,并根据需要进行处理。
领取专属 10元无门槛券
手把手带您无忧上云