Question

我想在HTML表单上进行一次简单的验证检查。我希望如此，如果用户选择18 - 24，则下拉选项旁边会显示错误：“你必须是25 +”。

<select class="element select medium" id="element_3" name="element_3"> 
<option value="" selected="selected"></option>
<option value="1" class="error" id="error">18 - 24</option>
<option value="2" >25 - 34</option>
<option value="3" >35 - 44</option>
<option value="4" >45 +</option>

我已经尝试将类和ID添加到值1.然后我尝试了类似：

function hidestuff(page){
   document.getElementById(error).style.visibility="hidden";
}

function showstuff(error){
   document.getElementById(error).style.visibility="visible";
}

尝试使用JavaScript切换显示和隐藏。当错误div切换显示时，希望像页面ID上的内容隐藏此消息。但这没效果。我也添加了相应的CSS。关于如何正确写这个的任何指针？

Answer 1

使用jQuery可以实现这样的东西：

这是JSFiddle

jQuery的：

$(document).ready(function() {

    $('#errorMsg').hide();  //ensure the error message is hidden

    $('#element_3').on('change',function() {

        // any option that has the class "error" will cause the error msg to be 
        // displayed (just in case you feel like adding a 0-17 option later)
        // To target an element by ID, use $(this).find(":selected").attr('id') == 'error'

        if ($(this).find(":selected").hasClass('error')) {
           $('#errorMsg').show();   
        } else {
            $('#errorMsg').hide();   
        }
    });
});

和一些HTML：

<select class="element select medium" id="element_3" name="element_3"> 
    <option value="" selected="selected"></option>
    <option value="1" class="error" id="error">18 - 24</option>
    <option value="2" >25 - 34</option>
    <option value="3" >35 - 44</option>
    <option value="4" >45 +</option>
</select>
<div id="errorMsg">You must be over 25</div>

为什么不用一些CSS来设置它：

#errorMsg {
    display: inline-block;    
    background-color: #fdd;
    font: 12pt arial;
    color: #f00;

    padding: 2px 5px 2px 5px;
    border: 1px solid #f00;
    border-radius: 5px;
    width: 200px;
}

Answer 2

我认为你必须做的就是这样的事情

<select id="myselect" onchange="check();">
    <option value="0">Select option</option>
    <option value="1">op1</option>
    <option value="2">op3</option>
</select>
<div id="error" style="display:none;">Error mesage</div>
<div id="page" style="width:100px;height:100px;border:1px solid black;display:none;">my page</div>
<script>
    function check() {
        switch (parseInt($('#myselect').val())) {
            case 0:
                $('#error').show();
                $('#page').hide();
                break;
            case 1:
                $('#error').show();
                $('#page').hide();
                break;
            case 2:
                $('#error').hide();
                $('#page').show();
                break;

        }
    }
</script>

http://jsfiddle.net/SS3gc/4/

将验证添加到HTML选择框

2 个答案: