1

ここに私の問題があります、

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 {

}

問題は、選択ボックスで値が選択されている場合、追加されたスパンが削除されることです。どんな助けでも。前もって感謝します...

4

4 に答える 4

2 
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-19T08:49:13.223 に答える
1

これを説明したいだけです：

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-19T09:55:07.467 に答える
0

jquery validatorを見てください。これはすべてあなたのために行います

于 2012-04-19T08:46:47.343 に答える
0

スパン（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();
}

このコードはまだテストしていませんが、同様の方法でうまくいくはずです。

于 2012-04-19T08:52:43.137 に答える