我想创建一个函数,当按下按钮时,检查从每个下拉列表中选择的选项。不知道我会怎么做,我在网上找到的一切都是jquery,我不想用。这可能是不可能的,这可能是好的,因为我可以只使用插入的输入值,但想到我可能也会问这里fisrt。
<body>
<select class="Alder" name="Alder">
<option id="B">0-12år</option>
<option id="V">Eldre en 12år</option>
</select>
<select class="Dager" name="Dager">
<option id="1">1 Dag</option>
<option id="2">2 Dager</option>
<option id="3">3 Dager</option>
<option id="4">4 Dager</option>
<option id="5">5 Dager</option>
<option id="6">6 Dager</option>
<option id="7">7 Dager</option>
</select>
<button id="prisKnapp" type="button" name="button">Regn ut pris</button>
</body>
您可以通过在每个选择输入上分配类来获取所有下拉输入的值,假设您使用的是select
类名。
HTML:
<body>
<select class="Alder select" name="Alder">
<option id="B">0-12�r</option>
<option id="V">Eldre en 12�r</option>
</select>
<select class="Dager select" name="Dager">
<option id="1">1 Dag</option>
<option id="2">2 Dager</option>
<option id="3">3 Dager</option>
<option id="4">4 Dager</option>
<option id="5">5 Dager</option>
<option id="6">6 Dager</option>
<option id="7">7 Dager</option>
</select>
<button id="prisKnapp" type="button" onclick='getVal()' name="button">Regn ut pris</button>
</body>
javascript:
var sel = document.getElementsByClassName("select");
function getVal(){
for (const key in sel) {
if (sel.hasOwnProperty(key)) {
console.log(sel[key].value);
}
}
}
给你的option
s value
s而不是id
s,然后你可以使用FormData
API来序列化表单,好像它是“传统”提交并访问将要发送的值:
document.getElementById("f").addEventListener("submit", (event) => {
event.preventDefault();
const fd = new FormData(event.target);
alert(
'Dager: ' + fd.get('Dager') + '\n' +
'Alder: ' + fd.get('Alder')
);
});
<body>
<form id="f">
<select class="Alder" name="Alder">
<option value="B">0-12år</option>
<option value="V">Eldre en 12år</option>
</select>
<select class="Dager" name="Dager">
<option value="1">1 Dag</option>
<option value="2">2 Dager</option>
<option value="3">3 Dager</option>
<option value="4">4 Dager</option>
<option value="5">5 Dager</option>
<option value="6">6 Dager</option>
<option value="7">7 Dager</option>
</select>
<button type="submit" name="button">Regn ut pris</button>
</form>
</body>