Question

我有3个可以作为一组复制的选择框，分为多行。这些永远不应该是空的。

我尝试了几个解决方案循环，但无法使检查正常工作。

在表单提交上，我有一个方法checkvalues（），我使用on click事件调用它来触发查询检查方法。

html就像这样

<section class="demo-wrap" id="animate-clone" data-original-title="" title="">

        <div class="toclone" data-original-title="" title="" style="display: block;">

            <!-- set row value with hidden field-->
            <input type="hidden" value="1" name="row[]" data-original-title="" title="">
            <!-- end row value -->

            <!-- start risk -->
            <div class="col-md-4 import_tables" data-original-title="" title="">
                <select style="width: 100% !important" name="target[]" id="target[]" data-original-title="" title="">
                                            <option value="5" data-original-title="" title="">5: target #1</option>
                                            <option value="6" data-original-title="" title="">6: target #2</option>
                                    </select>
            </div>
            <!-- end risk -->
            <!-- start risk -->
            <div class="col-md-4 import_tables" data-original-title="" title="">
                <select style="width: 100% !important" name="risk[]" id="risk[]" data-original-title="" title="">
                                            <option value="9" data-original-title="" title="">9: risk #1</option>
                                            <option value="10" data-original-title="" title="">10: risk #2</option>
                                    </select>
            </div>
            <!-- end risk -->
            <!-- start control -->
            <div class="col-md-4 import_tables" data-original-title="" title="">
                <select style="width: 100% !important;" name="control[]" id="control[]" data-original-title="" title="">
                                            <option value="9" data-original-title="" title="">9: control #1</option>
                                            <option value="10" data-original-title="" title="">10: control #2</option>
                                    </select>
            </div>
            <!-- end control -->

            <!-- START ACTIONS -->
            <div style="float: right; position: absolute; margin-left: -50px; margin-top: 10px" data-original-title="" title="">
                <a class="clone button button-icon floatright" href="#" data-original-title="" title="">
                    <img src="/assets/icons/icon-add.gif" data-original-title="" title="">
                </a>
                <a class="delete button button-icon floatright" href="#" data-original-title="" title="">
                    <img src="/assets/icons/icon-delete.gif" data-original-title="" title="">
                </a>
            </div>
            <!-- END ACTIONS -->

        </div><div class="toclone" data-original-title="" title="" style="">

            <!-- set row value with hidden field-->
            <input type="hidden" value="" name="row[]" data-original-title="" title="">
            <!-- end row value -->

            <!-- start risk -->
            <div class="col-md-4 import_tables" data-original-title="" title="">
                <select style="width: 100% !important" name="target[]" id="target[]1" data-original-title="" title="">
                                            <option value="5" data-original-title="" title="">5: target #1</option>
                                            <option value="6" data-original-title="" title="">6: target #2</option>
                                    </select>
            </div>
            <!-- end risk -->
            <!-- start risk -->
            <div class="col-md-4 import_tables" data-original-title="" title="">
                <select style="width: 100% !important" name="risk[]" id="risk[]1" data-original-title="" title="">
                                            <option value="9" data-original-title="" title="">9: risk #1</option>
                                            <option value="10" data-original-title="" title="">10: risk #2</option>
                                    </select>
            </div>
            <!-- end risk -->
            <!-- start control -->
            <div class="col-md-4 import_tables" data-original-title="" title="">
                <select style="width: 100% !important;" name="control[]" id="control[]1" data-original-title="" title="">
                                            <option value="9" data-original-title="" title="">9: control #1</option>
                                            <option value="10" data-original-title="" title="">10: control #2</option>
                                    </select>
            </div>
            <!-- end control -->

            <!-- START ACTIONS -->
            <div style="float: right; position: absolute; margin-left: -50px; margin-top: 10px" data-original-title="" title="">
                <a class="clone button button-icon floatright" href="#" data-original-title="" title="">
                    <img src="/assets/icons/icon-add.gif" data-original-title="" title="">
                </a>
                <a class="delete button button-icon floatright" href="#" data-original-title="" title="">
                    <img src="/assets/icons/icon-delete.gif" data-original-title="" title="">
                </a>
            </div>
            <!-- END ACTIONS -->

        </div>
</section>

Jquery方法

<script type="application/javascript">

    function checkValues(){

        if ($("#target[]").val() === "") {
            alert('empty');
        }

    }

</script>

任何人都能帮助我在这个问题上找到正确的方向吗？

Answer 1

尝试这样的事情

    if ($("#target\\[\\]").val() === "") {
        alert('empty');
    }

你需要逃避方括号。

现在，请记住，如果您使用多个元素而非使用class而不是id

var empty_target = false;
$('.target').each(function(){
    if(this.value === ""){
        empty_target = true;
    }
});

id(empty_target){
    alert('empty');
}

防止多个下拉列表中的空值

1 个答案: