js jq html jq判断下拉框判断不到 直接执行后台

Question

为什么判断输入框是否为空 判断成功，反而判断 下拉框只第一个可以判断到，第二个判断不到 直接就走后台了

 <div class="form-item item-5">
                    <div class="qy-table-plugin">
                        <table id="detail-table" class="qy-simple-table">
                            <thead>
                                <tr>
                                    <th style="min-width: 80px;">No.</th>
                                    <th style="min-width: 200px;">产品名称</th>
                                    <th style="min-width: 200px;">状态</th>
                                    <th style="min-width: 200px;">排序</th>
                                </tr>
                            </thead>
                            <tbody id="detail_table_body">
                                <tr class="z-row">
                                    <td>01</td>
                                    <td>
                                        <input type="text" placeholder="请输入产品分类名称" class="qy-input" runat="server" id="input_name" />
                                    </td>
                                    <td>
                                        <asp:DropDownList runat="server" CssClass="drop1" ID="drop" Style="text-align: center; height: 14%; border-radius: 10px; width: 100px">
                                        </asp:DropDownList>
                                    </td>
                                    <td>

                                        <asp:DropDownList runat="server" ID="drop_sort" Style="text-align: center; height: 14%; border-radius: 10px" CssClass="drop1">
                                        </asp:DropDownList>
                                    </td>

                                </tr>
                                <tr class="total-op-row">
                                    <td colspan="3" class="cus-op-row-td">
                                        <a class="qy-btn qy-button-6" id="add_row">增加1行</a>
                                        <a class="qy-btn qy-button-6" id="js_btn_add_row" >增加一行</a>
                                        <a class="qy-btn qy-button-7" id="js_btn_remove_row">删除一行</a>
                                        <%--<button class="qy-btn qy-button-6" id="js_btn_add_row ">增加一行</button>--%>
                                        <%--<button class="qy-btn qy-button-7" id="js_btn_remove_row ">删除一行</button>--%>
                                    </td>
                                    <td>
                                        <input value="1" id="hideval" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

 <script type="text/javascript">
        var result = true;
        $('#Sub_Btn').click(function () {
            var inputs = $('input,select');
            //循环处理
            inputs.each(function () {
                if (this.type == 'text') {
                    if ($(this).val() == '') {
                        alert('Input can not be empty.')
                        console.log('Input can not be empty.');
                        result = false;
                        return false;

                    } else {
                        result = true;
                    }
                }

                if ($('.drop1 option:selected').val() <= 0) {
                    result = false;
                    alert('SELECT OPTION EMPTY');
                    console.log('SELECT OPTION EMPTY');
                    return false;
                }
            });
            if (result) {
            } else {
                return false;
            }
        })
       
    </script>


```![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/009791736776128.png "#left")

Answer 1

该回答引用ChatGPT

首先，问题出现在判断下拉框是否为空的代码中，因为这段代码只能判断第一个下拉框是否为空。原因是你使用了类选择器".drop1"来选取下拉框，而类选择器选取的是所有具有该类的元素，因此会选取到表格中所有的下拉框，而不是只选取当前行的下拉框。

为了解决这个问题，你需要修改判断下拉框是否为空的代码。可以使用jQuery中的"this"来获取当前行的下拉框，例如：

if ($(this).find('.drop1 option:selected').val() <= 0) {
    result = false;
    alert('SELECT OPTION EMPTY');
    console.log('SELECT OPTION EMPTY');
    return false;
}

在这个代码中，$(this)表示当前正在处理的输入框或下拉框所在的行，而find(".drop1")则表示在这一行中查找类为"drop1"的元素，即下拉框，再通过option:selected选中选中的选项，最后判断选中的选项是否为空。