Jquery 追加一个 div 并删除一个 div答案

【问题标题】：Jquery to append a div and to remove a divJquery 追加一个 div 并删除一个 div
【发布时间】：2012-04-19 08:45:19
【问题描述】：

这是我的问题，

我有一个选择框，我需要在其中验证 val() 是否变为 0，然后在一个带有类错误的跨度中附加一个文本，说明“请选择一个值”。否则需要删除该div。当我单击提交按钮时会发生这些情况。这是我的代码，

if ($('.combo option:selected[value==0]')) {
    var error_span = $("div.info-cont ul.map-list li span.right")
        .append("<br>Please select an appropriate value")
        .addClass('error');
} else {

}

现在的问题是，如果在选择框中选择了一个值，我的附加跨度应该被删除。任何帮助。提前谢谢...

【问题讨论】：

标签： javascript jquery

【解决方案1】：

if($('.combo option:selected[value==0]')){
$("div.info-cont ul.map-list li span.right").append("<br>Please select an appropriate value").addClass('error');
} else {

$("div.info-cont ul.map-list li span.right").html("");
$("div.info-cont ul.map-list li span.right").removeClass('error');

}

【讨论】：

【解决方案2】：

我只是想解释一下：

if ($('.combo option:selected[value==0]'))

要检查从下拉列表中选择的项目的值是否为 0，您可以使用以下命令：

if ($('.combo').val() == '0') // simpler and more readable :-)

然后，如果您已经将错误消息放在文档中的某个位置会更简单。您需要做的就是显示/隐藏它。例如：

<select id="dropdown-1" class="combo">
  <option value="0">-</option>
  <option value="1">Lorem</option>
  <option value="2">Ipsum</option>
</select>

<span id="error-dropdown-1" class="error" style="display: none">Please select a value!</span> <!-- hidden by default. can also use CSS instead of style="display: none" -->

<input type="button" id="demo-button" value="Demo" />

还有 javascript (+ jquery)：

$('#demo-button').click(function() {
  if ($('.combo').val() == '0') {
    $('#error-dropdown-1').show();
  } else {
    $('#error-dropdown-1').hide();
  }
});

这是另一个例子。如果您避免使用 ID（也许您已经动态生成了 dorpdowns），则很有用：

<script type="text/javascript">
$(function() {
    $('#demo-button').click(function() {
        $('.combo').each(function() {
            var div = $(this).parents('div').get(0); // get the wrapper
            if ($(this).val() == '0') {
                $(div).find('.error').show(); // show <span class=".error"> inside the wrapper
            } else {
                $(div).find('.error').hide(); // hide <span class=".error"> inside the wrapper
            }
        });
    });
});
</script>

<div> <!-- wrapper for 1st combo + 1st error message -->
    <select class="combo">
        <option value="0">-</option>
        <option value="1">Lorem</option>
        <option value="2">Ipsum</option>
    </select>
    <span class="error" style="display: none">Please select a value!</span>
</div>

<div> <!-- wrapper for 2nd combo + 2nd error message -->
    <select class="combo">
        <option value="0">-</option>
        <option value="1">Dolor</option>
        <option value="2">Sit</option>
        <option value="3">Amet</option>
    </select>
    <span class="error" style="display: none">Please select a value!</span>
</div>

<div> <!-- wrapper for 3rd combo + 3rd error message -->
    <select class="combo">
        <option value="0">-</option>
        <option value="1">Consectetuer</option>
        <option value="2">Adipiscing</option>
        <option value="3">Elit</option>
    </select>
    <span class="error" style="display: none">Please select a value!</span>
</div>

<input type="button" id="demo-button" value="Demo" />

【讨论】：

感谢您的帮助。但是这些选择框是动态生成的。所以它可能是2个或更多。我们不能再使用 ID。我想，附加和删除功能将是摆脱它的唯一机会。
@Riyas 我刚刚编辑了代码。它可以用于动态生成的下拉菜单。它只使用类和树/DOM 遍历。

【解决方案3】：

看看jquery validator，它会为你做这一切

【讨论】：

【解决方案4】：

如果您的跨度 (span.right) 包含除错误消息之外的任何其他内容（我认为它基于 br 标记的使用），此方法将保留该内容。

var $select = $(".combo"),
    $span = $("div.info-cont ul.map-list li span.right");

if ($select.val() === 0) {
    $span.append(
        $("<span/>")
            .addClass("error")
            .html("Please select an appropriate value")
    );
} else {
    $span.children("error").remove();
}

我没有测试过这段代码，但类似的东西应该可以解决问题。

【讨论】：