javascript - 对下拉菜单中的特定选项执行 onclick 验证

Question

我有一个包含大约五个选项的下拉菜单和一个将其作为表单提交的按钮。我想知道是否可以在 onclick 中执行验证，以便您对碰巧选择的任何选项都有不同的验证。

例如，如果用户选择选项 Milk 并单击按钮，onclick 将使用方法 A 验证，而用户选择选项 Cheese 并单击按钮，onclick 将使用方法 B 验证。

目前，我只能通过 onclick 对所有选定的选项进行一次验证。

谢谢你的帮助。

Answer 1

在您的函数 onClick 检查您的选择值

function methodA(){
    //
}
function methodB(){
    //
}

function doOnClick(){
    switch($('your-select').val()){
        case 0 :
           methodA();
        break; 

        case 1 :
           methodB();
        break; 
    }
}

Answer 2

HTML：

<form id="formid">
    <select id="selectid">
        <option value="milk"> Milk </option>
        <option value="sugar"> Sugar</option>
    </select>
</form>

JS：

var validationRules = {
    'milk': function(){
        // validate
        return false;
    },
    'sugar': function(){
        // validate
        return true;
    }
}

var form = document.getElementById('formid');
var select = document.getElementById('selectid');


select.addEventListener('change', function(){
    var value = this.options[this.selectedIndex].value;
    form.valid = validationRules[value]();
});


form.addEventListener('submit', function(){
    return this.valid;
});

Answer 3

http://jsfiddle.net/adYtd/

您获得选择选项的值，然后将其用作保存验证功能的对象的键。

var Validation_Functions = {
    1: function(x){alert("1"+x);},
    2: function(x){alert("2"+x);},
    3: function(x){alert("3"+x);},
    4: function(x){alert("4"+x);},
}
$("#btn").on("click", function() {
    var val = $("#sel").val();
    Validation_Functions[val](" test");
});