如何获取有关值变化的jQuery下拉数据

Question

我添加了值Validate并提交表单。现在我想添加一个选择框并将数据添加到验证

计划是有2个下拉框，收集所有选择框数据，在使用jQuery，Ajax和PHP提交之前验证所述数据

有任何想法或建议吗？感谢。

我的JS代码

<script>
function submitContactForm() {
    var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
    var firstname = $('#inputfName').val();
    var lastname = $('#inputlName').val();
    var email = $('#inputEmail').val();
    var telephone = $('#inputTel').val();
    var category = $('#category').val();
    var gender = $('#gender').val();
    if (category.trim() == '') {
        alert('Please select a category.');
        $('#category').focus();
        return false;
        if (firstname.trim() == '') {
            alert('Please enter your name.');
            $('#inputfName').focus();
            return false;
            if (lastname.trim() == '') {
                alert('Please enter your name.');
                $('#inputlName').focus();
                return false;
                if (gender.trim() == '') {
                    alert('Please select your gender.');
                    $('#gender').focus();
                    return false;
                } else if (email.trim() == '') {
                    alert('Please enter your email.');
                    $('#inputEmail').focus();
                    return false;
                } else if (email.trim() != '' && !reg.test(email)) {
                    alert('Please enter valid email.');
                    $('#inputEmail').focus();
                    return false;
                } else if (telephone.trim() == '') {
                    alert('Please enter your Phone Number.');
                    $('#inputTel').focus();
                    return false;
                } else {
                    $.ajax({
                        type: 'POST',
                        url: 'submit_Vform.php',
                        data: 'contactFrmSubmit=1&firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&gender=' + gender + '&category=' + category + '&telephone='
                        telephone,
                        beforeSend: function() {
                            $('.submitBtn').attr("disabled", "disabled");
                            $('.modal-body').css('opacity', '.5');
                        },
                        success: function(msg) {
                            if (msg == 'ok') {
                                $('#category').val('');
                                $('#inputfName').val('');
                                $('#inputlName').val('');
                                $('#gender').val('');
                                $('#inputEmail').val('');
                                $('#inputTel').val('');
                                $('.statusMsg').html('<h1> Thank you for your interest!</h1><p>We\'ll get back to you soon.</p>');
                            } else {
                                $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
                            }
                            $('.submitBtn').removeAttr("disabled");
                            $('.modal-body').css('opacity', '');
                        }
                    });
                }
            }

我想要添加的选择框的HTML示例

<div class="ui-widget">
    <select id="drop">
        <option value="">Select one...</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
    </select>
</div>

Answer 1

添加选择时，您需要做的只是

首先通过 var drop = $（'＃drop'）获取其值.val（）;

验证 if（drop ==''）...

修改如下：

function submitContactForm() {
    var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
    var firstname = $('#inputfName').val();
    var lastname = $('#inputlName').val();
    var email = $('#inputEmail').val();
    var telephone = $('#inputTel').val();
    var category = $('#category').val();
    var gender = $('#gender').val();
    var drop = $('#drop').val();
    var drop2 = $('#drop2').val();
    if (category.trim() == '') {
        alert('Please select a category.');
        $('#category').focus();
        return false;
    }
    if (firstname.trim() == '') {
        alert('Please enter your name.');
        $('#inputfName').focus();
        return false;
    }
    if (lastname.trim() == '') {
        alert('Please enter your name.');
        $('#inputlName').focus();
        return false;
    }
    if (gender.trim() == '') {
        alert('Please select your gender.');
        $('#gender').focus();
        return false;
    }
    if (email.trim() == '') {
        alert('Please enter your email.');
        $('#inputEmail').focus();
        return false;
    }
    if (email.trim() != '' && !reg.test(email)) {
        alert('Please enter valid email.');
        $('#inputEmail').focus();
        return false;
    }
    if (telephone.trim() == '') {
        alert('Please enter your Phone Number.');
        $('#inputTel').focus();
        return false;
    }
    if (drop == '') {
        alert('Please select drop\'s value');
        return false;
    }
    if (drop2 == '') {
        alert('Please select drop2\'s value');
        return false;
    }
    $.ajax({
        type: 'POST',
        url: 'submit_Vform.php',
        data: 'contactFrmSubmit=1&firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&gender=' + gender + '&category=' + category + '&telephone='
        telephone+ '&drop=' + drop + '&drop2=' + drop2,
        beforeSend: function() {
            $('.submitBtn').attr("disabled", "disabled");
            $('.modal-body').css('opacity', '.5');
        },
        success: function(msg) {
            if (msg == 'ok') {
                $('#category').val('');
                $('#inputfName').val('');
                $('#inputlName').val('');
                $('#gender').val('');
                $('#inputEmail').val('');
                $('#inputTel').val('');
                $('#drop').val('');
                $('#drop2').val('');
                $('.statusMsg').html('<h1> Thank you for your interest!</h1><p>We\'ll get back to you soon.</p>');
            } else {
                $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
            }
            $('.submitBtn').removeAttr("disabled");
            $('.modal-body').css('opacity', '');
        }
    });
}