1

HTML フォームで簡単な検証チェックを行いたいと考えています。ユーザーが 18 ～ 24 歳を選択した場合、ドロップダウン選択の横に「You must be 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も追加しました。これを正しく書く方法についての指針はありますか？

4

2 に答える 2

4

このようなことは、少しの 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;
}
于 2013-06-01T22:07:19.583 に答える
1

あなたがしなければならないことは、このようなものだと思います

<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/

于 2013-06-01T22:09:37.167 に答える