[英]Jquery to append a div and to remove a div
這是我的問題,
我有一個選擇框,我需要驗證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 {
}
現在問題是,如果在選擇框中選擇了一個值,我的附加范圍應該被刪除。 任何幫助。 提前致謝...
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'); }
我只想解釋一下:
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" />
看看jquery驗證器 ,它會為您完成所有這些
如果您的span(span.right)包含其他任何錯誤消息(我認為它基於br-tag的使用),此方法將把該內容保留在原來的位置。
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();
}
我沒有測試過這段代碼,但類似的東西應該可以解決。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.