我有一个使用 PHP 动态生成的下拉列表。其渲染的 HTML 类似于下面的标记 -
<select size="8" id="email" name="email">
<option value="6" data-userId="uid6"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e8838985898489a88f85898184c68b8785" rel="noreferrer noopener nofollow">[email protected]</a></option>
<option value="8" data-userId="uid8"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2a6b992b5fcb1bdbf" rel="noreferrer noopener nofollow">[email protected]</a></option>
<option value="3" data-userId="uid3">myexample.com</option>
<option value="7" data-userId="uid7"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f88b9995999c9091b89f95999194d69b9795" rel="noreferrer noopener nofollow">[email protected]</a></option>
<option value="2" data-userId="uid2">facebook.com</option>
<option value="4" data-userId="uid4">lankainstitute.com</option>
</select>
使用此标记,我只是想使用 JavaScript 检查是否选择了项目。如果没有选择某个项目,那么我需要收到一条警报消息。
我尝试过类似的事情。但我无法让它发挥作用。
JavaScript -
var email = document.getElementById("email");
var selectedValue = email.options[email.selectedIndex].value;
if (selectedValue == '') {
alert("Please select a email");
}
希望有人能帮助我。 谢谢。
最佳答案
您应该监听 select 元素的 change
事件,然后将所选选项的值解析为整数 (parseInt(email.options[email.selectedIndex].value, 10)
):
var email = document.getElementById("email");
email.addEventListener('change', function (e) {
var selectedValue = parseInt(email.options[email.selectedIndex].value, 10);
if (selectedValue === 7) {
alert("Please select a email");
}
});
var email = document.getElementById("email");
email.addEventListener('change', function (e) {
var selectedValue = parseInt(email.options[email.selectedIndex].value, 10);
if (selectedValue === 7) {
alert("Please select a email");
}
});
<select size="8" id="email" name="email">
<option value="6" data-userId="uid6"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8d3d9d5d9d4d9f8dfd5d9d1d496dbd7d5" rel="noreferrer noopener nofollow">[email protected]</a></option>
<option value="8" data-userId="uid8"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ffbe4cfe8a1ece0e2" rel="noreferrer noopener nofollow">[email protected]</a></option>
<option value="3" data-userId="uid3">myexample.com</option>
<option value="7" data-userId="uid7"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95e6f4f8f4f1fdfcd5f2f8f4fcf9bbf6faf8" rel="noreferrer noopener nofollow">[email protected]</a></option>
<option value="2" data-userId="uid2">facebook.com</option>
<option value="4" data-userId="uid4">lankainstitute.com</option>
</select>
...由于您正在验证是否选择了某个选项,因此您将使用更多类似的内容:
var email = document.getElementById("email"),
validationButton = document.getElementById('validationButton');
validationButton.addEventListener('click', function (e) {
var selectedValue = email.options[email.selectedIndex] ? email.options[email.selectedIndex].value : null;
if (!selectedValue) {
alert("Please select a email");
}
});
var email = document.getElementById("email"),
validationButton = document.getElementById('validationButton');
validationButton.addEventListener('click', function (e) {
var selectedValue = email.options[email.selectedIndex] ? email.options[email.selectedIndex].value : null;
if (!selectedValue) {
alert("Please select a email");
}
});
<select size="8" id="email" name="email">
<option value="6" data-userId="uid6"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee858f838f828fae89838f8782c08d8183" rel="noreferrer noopener nofollow">[email protected]</a></option>
<option value="8" data-userId="uid8"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="582c33183f763b3735" rel="noreferrer noopener nofollow">[email protected]</a></option>
<option value="3" data-userId="uid3">myexample.com</option>
<option value="7" data-userId="uid7"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8abb9b5b9bcb0b198bfb5b9b1b4f6bbb7b5" rel="noreferrer noopener nofollow">[email protected]</a></option>
<option value="2" data-userId="uid2">facebook.com</option>
<option value="4" data-userId="uid4">lankainstitute.com</option>
</select>
<button id="validationButton">Check if selected</button>
关于javascript - 检查是否未从下拉列表中选择某个项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28080393/