Question

我需要在selectbox val == 0时删除现有的html。这是我的HTML，

<div class="info-cont">
    <ul class="map-list">
        <li>
            <span class="left">
                <label>Name 1</label>
            </span>
            <span class="right">
                <select class="combo">
                    <option selected="selected" value="0"></option>
                    <option value="1">F name</option>
                    <option value="2">M name</option>
                    <option value="3">L name</option>
                </select>
            </span>
        </li>
    </ul>
</div>

注意：我的页面中有大约10个选择框，如上所述

和上面的jquery是，

$(document).ready(function () {
    $('#save').click(function () {
        var comboLength = $('.combo').length;
        var selectedLength = $('.combo option:selected[value!=0]').length;
        if (comboLength == selectedLength) {
            alert('Thanks all the fields are selected');
            return false;
        }
        if ($('.combo option:selected[value==0]')) {
            $("div.info-cont ul.map-list li span.right").append("<br>Please select an appropriate value").addClass('validerror');
        } else {
            $("div.info-cont ul.map-list li span.right").html("");
            $("div.info-cont ul.map-list li span.right").removeClass('validerror');
        }
        return false;
    })
});

在其他条件下我需要做什么？（我的其他部分不是功能）。此外，当我第二次单击提交按钮时，我不应该附加我在第一次点击时收到的html。有帮助吗？感谢...

Answer 1

将if更改为

if($('.combo option:selected').val() === '0'){

所有问题都可以通过

解决

$(document).ready(function(){
    $('#save').click(function(){
        var combo = $('.combo'), // get all combo elements
            selected = $('.combo').filter(function(){
                return $(this).find('option[value!="0"]:selected').length;
            }), // get all valid combo elements
           unselected = combo.not(selected); // get all non-valid combo elements

        // clear previous error messages
        combo
            .closest('.right') // find containing .right element
            .removeClass('validerror') // remove error class
            .find('.errormessage') // find error message
            .remove(); // remove error message

        // chech if all combos are valid
        if (combo.length === selected.length) {
            alert('Thanks all the fields are selected');
            return false;
        }

        // highlight non-valid elements
        unselected
            .closest('.right')
            .addClass('validerror')
            .append('<div class="errormessage">Please select an appropriate value</div>');

        return false;
    });
});

演示http://jsfiddle.net/gaby/Y3RrH/

如何在单击时删除元素

1 个答案: