hide e show div con jquery

[djjunior]

Salve,
ho fatto questo script che tramite la select dovrebbe farmi vedere i vari div, selezionando 02, dovrebbe farmi vedere solo il div post2 , selezionando 03 i div post2 e post3 e così via.
Ma purtroppo funziona soltanto selezionando 10, cioè in quel modo me li fa vedere tutti, come dovrebbe essere ma selezionando gli altri numeri niente.
Non capisco dove sto sbagliando.

<SCRIPT Language="Javascript">
$(function() {
    $('#post2').hide(); 
    $('#post3').hide();
    $('#post4').hide();
    $('#post5').hide();
    $('#post6').hide();
    $('#post7').hide();
    $('#post8').hide();
    $('#post9').hide();
    $('#post10').hide();
    $('#posti').change(function(){
        if($('#posti').val() == '02') {
            $('#post2').show(); 
        } else {
            $('#post2').hide(); 
        } 
        if($('#posti').val() == '03') {
            $('#post2').show(); 
            $('#post3').show();
        } else {
            $('#post2').hide(); 
            $('#post3').hide();
        } 
        if($('#posti').val() == '04') {
            $('#post2').show(); 
            $('#post3').show();
            $('#post4').show();
        } else {
            $('#post2').hide(); 
            $('#post3').hide();
            $('#post4').hide();
        } 
        if($('#posti').val() == '05') {
            $('#post2').show(); 
            $('#post3').show();
            $('#post4').show();
            $('#post5').show();
        } else {
            $('#post2').hide(); 
            $('#post3').hide();
            $('#post4').hide();
            $('#post5').hide();
        } 
        if($('#posti').val() == '06') {
            $('#post2').show(); 
            $('#post3').show();
            $('#post4').show();
            $('#post5').show();
            $('#post6').show();
        } else {
            $('#post2').hide(); 
            $('#post3').hide();
            $('#post4').hide();
            $('#post5').hide();
            $('#post6').hide();
        } 
         if($('#posti').val() == '07') {
            $('#post2').show(); 
            $('#post3').show();
            $('#post4').show();
            $('#post5').show();
            $('#post6').show();
            $('#post7').show();
        } else {
            $('#post2').hide(); 
            $('#post3').hide();
            $('#post4').hide();
            $('#post5').hide();
            $('#post6').hide();
            $('#post7').hide();
        } 
         if($('#posti').val() == '08') {
            $('#post2').show(); 
            $('#post3').show();
            $('#post4').show();
            $('#post5').show();
            $('#post6').show();
            $('#post7').show();
            $('#post8').show();
        } else {
            $('#post2').hide(); 
            $('#post3').hide();
            $('#post4').hide();
            $('#post5').hide();
            $('#post6').hide();
            $('#post7').hide();
            $('#post8').hide();
        } 
         if($('#posti').val() == '09') {
            $('#post2').show(); 
            $('#post3').show();
            $('#post4').show();
            $('#post5').show();
            $('#post6').show();
            $('#post7').show();
            $('#post8').show();
            $('#post9').show();
        } else {
            $('#post2').hide(); 
            $('#post3').hide();
            $('#post4').hide();
            $('#post5').hide();
            $('#post6').hide();
            $('#post7').hide();
            $('#post8').hide();
            $('#post9').hide();
        } 
         if($('#posti').val() == '10') {
            $('#post2').show(); 
            $('#post3').show();
            $('#post4').show();
            $('#post5').show();
            $('#post6').show();
            $('#post7').show();
            $('#post8').show();
            $('#post9').show();
            $('#post10').show();
        } else {
            $('#post2').hide(); 
            $('#post3').hide();
            $('#post4').hide();
            $('#post5').hide();
            $('#post6').hide();
            $('#post7').hide();
            $('#post8').hide();
            $('#post9').hide();
            $('#post10').hide();
        } 
    });
});
</script>
<div class="row"> 
<select name="posti" id="posti" size="1">
<option name="01" value="01" >01</option>
<option name="02" value="02" >02</option>
<option name="03" value="03" >03</option>
<option name="04" value="04" >04</option>
<option name="05" value="05" >05</option>
<option name="06" value="06" >06</option>
<option name="07" value="07" >07</option>
<option name="08" value="08" >08</option>
<option name="09" value="09" >09</option>
<option name="10" value="10" >10</option>
</select></div>

<div class="row" id="post2">
prova
</div>
<div class="row" id="post3">
prova3
</div>
<div class="row" id="post4">
prova4
</div>
<div class="row" id="post5">
prova5
</div>
<div class="row" id="post6">
prova6
</div>
<div class="row" id="post7">
prova7
</div>
<div class="row" id="post8">
prova8
</div>
<div class="row" id="post9">
prova9
</div>
<div class="row" id="post10">
prova10
</div>

Grazie per l'aiuto
G.

[pietro09]

jquery non è il mio forte e il codice di sotto non so se vada

    <script type="text/javascript">
        // <![CDATA[
        $(document).ready(function ()
            {
                for (var i = 2; i <= 10; i++) $("#post" + i).hide();

                $("#posti").change(function ()
                {
                    for (var i = 2; i <= 10; i++) $("#post" + i).hide();
                    var j = $(this).val();
                    for (var k = 2; k <= j; k++) $("#post" + k).show();
                });

            }
        );

        // ]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="row">
            <select name="posti" id="posti" size="10" multiple="True">
                <option name="01" value="1">01</option>
                <option name="02" value="2">02</option>
                <option name="03" value="3">03</option>
                <option name="04" value="4">04</option>
                <option name="05" value="5">05</option>
                <option name="06" value="6">06</option>
                <option name="07" value="7">07</option>
                <option name="08" value="8">08</option>
                <option name="09" value="9">09</option>
                <option name="10" value="10">10</option>
            </select>
        </div>
        <hr />
        <div>
            <div class="row" id="post2">prova2</div>
            <div class="row" id="post3">prova3</div>
            <div class="row" id="post4">prova4</div>
            <div class="row" id="post5">prova5</div>
            <div class="row" id="post6">prova6</div>
            <div class="row" id="post7">prova7</div>
            <div class="row" id="post8">prova8</div>
            <div class="row" id="post9">prova9</div>
            <div class="row" id="post10">prova10</div>

        </div>
    </form>
</body>
</html>

[marino51]

un'altra versione più simile alla tua

<script src="jquery.min.js"></script>
<SCRIPT Language="Javascript">
$(document).ready(function () {
    var x = '01';
    HideUnhide();
    function HideUnhide() 
    {
        $('#post2').hide();
        $('#post3').hide();
        $('#post4').hide();
        $('#post5').hide();
        $('#post6').hide();
        $('#post7').hide();
        $('#post8').hide();
        $('#post9').hide();
        $('#post10').hide();
        if(x == '01') return;
        $('#post2').show();
        if(x == '02') return;
        $('#post3').show();
        if(x == '03') return;
        $('#post4').show();
        if(x == '04') return;
        $('#post5').show();
        if(x == '05') return;
        $('#post6').show();
        if(x == '06') return;
        $('#post7').show();
        if(x == '07') return;
        $('#post8').show();
        if(x == '08') return;
        $('#post9').show();
        if(x == '09') return;
        $('#post10').show();
    }
    $('select#posti').change(function(){
        x = $("select#posti option:selected").attr('value');
        HideUnhide();
    });
});
</script>
<div class="row"> 
<select id="posti" name="posti">
<option value="01" >01</option>
<option value="02" >02</option>
<option value="03" >03</option>
<option value="04" >04</option>
<option value="05" >05</option>
<option value="06" >06</option>
<option value="07" >07</option>
<option value="08" >08</option>
<option value="09" >09</option>
<option value="10" >10</option>
</select>
</div>
<div class="post2" id="post2">
prova2
</div>
<div class="row" id="post3">
prova3
</div>
<div class="row" id="post4">
prova4
</div>
<div class="row" id="post5">
prova5
</div>
<div class="row" id="post6">
prova6
</div>
<div class="row" id="post7">
prova7
</div>
<div class="row" id="post8">
prova8
</div>
<div class="row" id="post9">
prova9
</div>
<div class="row" id="post10">
prova10
</div> 

[djjunior]

Grazie ad entrambi, utilizzerò quello di pietro09 perchè più semplice solo che per ogni div ho predisposto 3 campi che devono essere compilato, nonchè ho un controllo del form tipo:

<!--
function controllo(){
with(document.info) {
if(prenotazione.value=="") {
alert("Errore: Non è stata indicata la prenotazione");
prenotazione.focus();
return false;
}
if(nome1.value=="") {
alert("Errore: compilare il campo NOME");
nome1.focus();
return false;
}
.......

ma i campi che nascondo dovrebbero essere controllati solo se selezionati, come posso fare?
Grazie