jQuery來追加一個div和刪除一個div

我有一個選擇框，我需要驗證，如果VAL（）變爲0，然後附加一個文本insed一個跨度類錯誤說明'請選擇一個值'。否則需要刪除該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 { 

}

現在的問題是，如果在選擇框中選擇一個值，我的附加跨度應該被刪除。任何幫助。在此先感謝...

來源

2012-04-19 steeve

我只是想說明這一點：

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" />

來源

2012-04-19 09:55:07

感謝您的幫助。但是這些選擇框是動態生成的。所以它可能是2或更多。我們不能再使用身份證了。我想，追加和刪除功能將是擺脫它的唯一機會。 – steeve 2012-04-19 10:02:30

@Riyas我剛剛編輯了代碼。它可以用於動態生成的下拉菜單。它只使用類和樹/ DOM遍歷。 – 2012-04-19 10:34:40

看一看jquery validator，它確實這一切都爲您

來源

2012-04-19 08:46:47 slipset

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'); 

}

來源

2012-04-19 08:49:13 nu6A

刪除功能不起作用。 – steeve 2012-04-19 08:59:27

如果你的跨度（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(); 
}

我沒有測試此代碼，但同樣應該做的伎倆東西。

來源

2012-04-19 08:52:43

這不起作用。 – steeve 2012-04-19 09:41:29

jQuery來追加一個div和刪除一個div

回答

相關問題