javascript - 表单提交验证下拉列表的动态#

Question

我有一个表单，可以显示带有下拉列表的动态行数。每个下拉列表都有一个 ID 为“ReasonCd#”，末尾的数字从 0 开始递增——与行号相应。每个下拉菜单都有一个默认选择“选择数字”，值为 NULL。

我想在表单中添加提交验证。我如何提醒用户是否有任何动态数量的下拉菜单选择了默认选项？

<select id='ReasonCd" . $counter . "'>
<option disabled='disabled' selected='selected' value=''>Select Number</option>
<option>blah</option>
</select>

我试图创建自己的 jQuery，但不幸的是我无法让它工作。

(当我的提交按钮被点击时)

$("#submitButton").click(function() {
$('[id^=ReasonCd]').filter(function(){
    if($(this).text() == "Select Number"){
        alert('Please Select a Number!!!');
    }
});

});

Answer 1

检查选择的选项:

    $("#submitButton").click(function(e) {
        $('[id^=ReasonCd] option:selected').filter(function(){
        if($(this).text() == "Select Number"){
            alert('Please Select a Number!!!');
            e.preventDefault(); //cancel postback
            return false; //exit of .filter

        }
       });
    });

或者:

$('form').submit(function(e) {
    $('[id^=ReasonCd] option:selected').each(function(){
    if($(this).text() == "Select Number"){
        alert('Please Select a Number!!!');
        e.preventDefault();
        return false;
    }
});
});

With multiple dropdowns

Live Demo Update