在 tab out 上验证下拉列表

Question

我正在尝试验证 tabout.The 下拉列表中的下拉列表是否如图所示

 <div class="form-group">
            <label class="col-sm-2 control-label labelfont">Select a Provider Type:</label>
            <div class="col-sm-10" id="ProviderType">
                <select class="form-control">
                    <option>Select a Provider Type</option>
                    <option>Doctor</option>
                    <option>Facility</option>
                </select>
            </div>
        </div>

我已经编写了以下代码来获取标签上的警报

$("#ProviderType").on("blur", function () {
    if ($("this")[0].selectedindex <= 0)
        alert("Please choose a Provider");
});

以上代码无效，

所以我尝试了这段代码，但也不起作用

$("#ProviderType option:selected").on("blur", function () {
    if ($("this").text() == "Select a Provider Type")
        alert("Please choose a Provider");
});

如有任何帮助，我们将不胜感激guys.Thanks。

按照建议，我使用 .bind() 方法进行了一些事件处理。

 $("#Certification").bind("blur",function () {
    alert("Event binding is working fine.")
});

我在跳出 Dropdownlist.I 时看到警告，但仍然没有看到错误 though.Please 指导我。

Answer 1

解决方案 1 - 将空值设置为第一个选项

一个解决方案是为第一个选项设置一个空值，然后检查所选值

$("#Certification").bind("blur",function () {
    var selected_value = $(this).val();
    if(selected_value==null || selected_value=='') {
        alert("Please choose a Provider");
    }
});

Fiddle

这可用于在元素失去焦点后立即检查值。然而，该解决方案可能会让用户感到厌烦，因为他们可能想要返回并做出新的选择。因此，您可以评估第二个解决方案。

解决方案 2 - 隐藏第一个选项

另一种解决方案可能是从列表中隐藏第一个选项，这样用户就无法选择它，然后再检查选择的值，即在表单提交时。

$("#myform").submit(function()  {
    var selected_value = $("#Certification").val();
    if(selected_value==null || selected_value=='') {
        alert("Please choose a Provider");
        return false;
    }
    return false; // remove this line in real form submission
});

Fiddle

在 tab out 上验证下拉列表

Validate a dropdownlist on tab out

html

jquery

drop-down-menu