Javascript Jquery追加div和删除div
这是我的问题 我有一个选择框,需要在其中验证val是否变为0,然后附加一个文本,插入一个带有类错误的范围,说明“请选择一个值”。否则需要删除该div。单击submit按钮时会发生这种情况。这是我的密码Javascript Jquery追加div和删除div,javascript,jquery,Javascript,Jquery,这是我的问题 我有一个选择框,需要在其中验证val是否变为0,然后附加一个文本,插入一个带有类错误的范围,说明“请选择一个值”。否则需要删除该div。单击submit按钮时会发生这种情况。这是我的密码 if ($('.combo option:selected[value==0]')) { var error_span = $("div.info-cont ul.map-list li span.right") .append("<br>Please sele
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 {
}
现在的问题是,如果在selectbox中选择了一个值,我附加的跨度应该被删除。任何帮助。提前感谢…看一看,这一切都是为了你
如果您的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();
}
我还没有测试过这段代码,但类似的东西应该可以做到这一点。我只想解释一下:
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" />
这里是另一个例子。如果您避免使用ID,则很有用可能您已经动态生成了DORPDOWN:
<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遍历。
$('#demo-button').click(function() {
if ($('.combo').val() == '0') {
$('#error-dropdown-1').show();
} else {
$('#error-dropdown-1').hide();
}
});
<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" />