使用 jQuery 在 HTML 中显示错误消息答案

【问题标题】：Display an error message in HTML using jQuery使用 jQuery 在 HTML 中显示错误消息
【发布时间】：2019-09-18 16:55:06
【问题描述】：

我正在尝试使用 jQuery 显示错误消息。出错时不显示。我从另一个问题中提取了这个并对其进行了修改。

jQuery（包含在触发的 if 异常测试中）是：

$("#projectIDSelect").html("Please select a Project ID").addClass("error-msg"); // chained methods

html 是：

<p>
    <label for="projectIDSelect">Project ID<span class="required">*</span></label>

    <!--Place to load the Project Names into for selection -->
    <select class="col-lg-3 col-md-3 col-sm-4 col-xs-6"  style="height:30px; color:black;" id="projectIDSelect" name="projectIDSelect" required>
        <option value="" disabled selected>Select a Project</option>
    </select>
</p>

此外，在此运行后，下拉菜单不再包含选项（这些选项已被动态加载）。

【问题讨论】：

我觉得您的问题在于在您的 <select> 元素上调用 .html(...) 方法，该方法解析您的字符串输入并替换 innerHTML。而是使用.text(...) 描述的here 方法。
另外，用奇怪的内容填充<select> 标签是没有意义的（即，不是<option>s）。添加一个单独的容器，就像其他人在这里建议的那样，专门用于显示您的状态更新。

标签： jquery html

【解决方案1】：

#projectIDSelect 是一个组合框或下拉框。在您的 jquery 中，当您使用 .html 更新内容时，它不会显示错误，因为它无法在下拉框中显示 html 内容。

您需要添加单独的标识符来显示消息。

您的代码可能是：

<p>
    <label for="projectIDSelect">Project ID<span class="required">*</span></label>

    <!--Place to load the Project Names into for selection -->
    <select class="col-lg-3 col-md-3 col-sm-4 col-xs-6"  style="height:30px; color:black;" id="projectIDSelect" name="projectIDSelect" required>
        <option value="" disabled selected>Select a Project</option>
    </select>
    <p id="projectIDSelectError"></p>
</p>

你的 jquery 可能是：

$("#projectIDSelectError").html("Please select a Project ID").addClass("error-msg"); // chained methods

【讨论】：

【解决方案2】：

$(function() {
    if (!$('#projectIDSelect option:selected').val()) {
        $("#divError").html("Please select a Project ID").addClass("error-msg"); // chained methods
    } else {
        $("#divError").html("").removeClass("error-msg");
    }
    $("#projectIDSelect").change(function() {
        if (!$('option:selected').val()) {
            $("#divError").html("Please select a Project ID").addClass("error-msg"); // chained methods
        } else {
            $("#divError").html("").removeClass("error-msg");
        }
    });
});

.error-msg {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
   <label for="projectIDSelect">Project ID<span class="required">*</span></label>
   <!--Place to load the Project Names into for selection -->
   <select class="col-lg-3 col-md-3 col-sm-4 col-xs-6"  style="height:30px; color:black;" id="projectIDSelect" name="projectIDSelect" required>
      <option value=""  selected>Select a Project</option>
      <option value="1" >123</option>
      <option value="2" >321</option>
   </select>
</p>
<div id='divError'></div>

【讨论】：

【解决方案3】：

您在标签中选择id 而不是for 选择器参考jQuery selector for the label of a checkbox 这有帮助

$("label[for='projectIDSelect']").html("Please select a Project ID").addClass("error-msg");

.error-msg
{
color:red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>
    <label for="projectIDSelect">Project ID<span class="required">*</span></label>

    <!--Place to load the Project Names into for selection -->
    <select class="col-lg-3 col-md-3 col-sm-4 col-xs-6"  style="height:30px; color:black;" id="projectIDSelect" name="projectIDSelect" required>
        <option value="" disabled selected>Select a Project</option>
    </select>
</p>

【讨论】：