检查是否未从下拉列表中选择项目

Check if an item is not selected from a dropdown

本文关键字：选择 项目 下拉列表 是否 检查      更新时间：2023-09-26

我有一个使用 PHP 动态生成的下拉列表。它呈现的 HTML 类似于下面的标记 - 

<select size="8" id="email" name="email">
    <option value="6" data-userId="uid6">kamala@gmail.com</option>
    <option value="8" data-userId="uid8">tk@g.com</option>
    <option value="3" data-userId="uid3">myexample.com</option>
    <option value="7" data-userId="uid7">samadhi@gmail.com</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">kamala@gmail.com</option>
    <option value="8" data-userId="uid8">tk@g.com</option>
    <option value="3" data-userId="uid3">myexample.com</option>
    <option value="7" data-userId="uid7">samadhi@gmail.com</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">kamala@gmail.com</option>
    <option value="8" data-userId="uid8">tk@g.com</option>
    <option value="3" data-userId="uid3">myexample.com</option>
    <option value="7" data-userId="uid7">samadhi@gmail.com</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>

相关文章：