Resettare i campi select di un form

[Marcolino's]

Ciao, lo so che la questione è banale, ma mi sta tenendo bloccato da mezza giornata e non è bello In pratica ho un form con qualche campo di testo, una select a discesa con selezione unica di 4 elementi, e altre due per la data ( due select per giorno e mese e una textbox per l'anno ).Niente di complicato, ma avevo bisogno di resettare il form ad un certo punto; tutto bene se non che le due select del giorno e del mese proprio non si azzerano
Vi spiego cosa ho fatto.
Creo un bottone di cancellazione:

<button type="button" id="cancella">CANCELLA</button>

Quindi ne gestisco l'evento tramite javascript (jquery) per intercettare la volontà dell'utente di ricominciare da zero. ( sono paranoico? Non penso )

$('#cancella').on('click', function(){
                if (confirm("Sicuro che vuoi cancellare il form per ricominciare da capo?") === true)
                {
                    $('#form-modify')[0].reset();
                    $('#tipo option[value=0]').attr('selected', 'selected');
                    $('#giorno option[value=0]').attr('selected', 'selected');
                    $('#mese option[value=0]').attr('selected', 'selected');
                }
 });

In origine c'era solo il richiamo al reset del form, ma non mi resettava le select, quindi ho provveduto a farlo manualmente con i controlli che ci sono sotto il reset().
Ma nulla, mi sistema la select chiamata #tipo

                                 <select id="tipo" name="tipo">
                                    <option value="0">Pittura</option>
                                    <option value="1">Scultura</option>
                                    <option value="2">Carboncino</option>
                                    <option value="3">Vita dell'autore</option>
                                </select>

Ma non mi sistema affatto quelle di mese e giorno, che ve lo dico subito sono generate con dei cicli in PHP e creano questo codice:

                                     <select name="giorno" id="giorno">
                                            <option value="0">Giorno</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option>
                                            <option value="12">12</option>
                                            <option value="13">13</option>
                                            <option value="14">14</option>
                                            <option value="15">15</option>
                                            <option value="16">16</option>
                                            <option value="17">17</option>
                                            <option value="18">18</option>
                                            <option value="19">19</option>
                                            <option value="20">20</option>
                                            <option value="21">21</option>
                                            <option value="22">22</option>
                                            <option value="23">23</option>
                                            <option value="24">24</option>
                                            <option value="25">25</option>
                                            <option value="26">26</option>
                                            <option value="27">27</option>
                                            <option value="28">28</option>
                                            <option value="29">29</option>
                                            <option value="30">30</option>
                                            <option value="31">31</option>
                                        </select>

                                        <select name="mese" id="mese">
                                            <option value="0">Mese</option>
                                            <option value="1">gennaio</option>
                                            <option value="2">febbraio</option>
                                            <option value="3">marzo</option>
                                            <option value="4">aprile</option>
                                            <option value="5">maggio</option>
                                            <option value="6">giugno</option>
                                            <option value="7">luglio</option>
                                            <option value="8">agosto</option>
                                            <option value="9">settembre</option>
                                            <option value="10">ottobre</option>
                                            <option value="11">novembre</option>
                                            <option value="12">dicembre</option>
                                        </select>

Il tutto è racchiuso in un banale form con id="form-modify" tanto per identificarlo.
Francamente non riesco a comprendere il comportamento di queste due ultime select, sarò imbranato ma non mi viene la soluzione.
Tanto per la cronaca ho anche riscritto a mano la select dei mesi pensando, a torto, che forse poteva dipendere dalla generazione del codice tramite PHP, ma nulla ovviamente; l'unica cosa che mi vene da pensare è che le select vengono selezionate in automatico tramite un tasto a lato che copia il codice dal database ( è un form di modifica dopotutto ) ma se anche fosse, perché invece la select di tipo viene resettata correttamente?

[KillerWorm]

Ciao, prendendo il codice che hai postato e inserendolo in una semplice pagina html, a me funziona anche richiamando il solo reset().
Il problema è quindi da cercare altrove. Controlla con un validatore che non ci siano errori nel codice html e che gli id utilizzati siano univoci nel tuo documento.

[Marcolino's]

Il codice che vedi è un copia e incolla da quello del sito, quindi

[pietro09]

Il codice che vedi è un copia e incolla da quello del sito, quindi

non è possibile . Anche io ho provato con una semplice pagina html e vedo che va. Questo quello che ho provato (copia-incolla dal tuo codice)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../js/jquery/jquery-min.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[

$(document).ready(function() 
        {
            $('#cancella').on('click', function(){
                            if (confirm("Sicuro che vuoi cancellare il form per ricominciare da capo?") === true)
                            {
                                $('#form-modify')[0].reset();
                                $('#tipo option[value=0]').attr('selected', 'selected');
                                $('#giorno option[value=0]').attr('selected', 'selected');
                                $('#mese option[value=0]').attr('selected', 'selected');
                            }
             });

        }
    );

// ]]>
</script>
</head>
<body>
    <form id="form-modify" action="/scriviparametri">
        <button type="button" id="cancella">CANCELLA</button>
        <br /><br />
        <select id="tipo" name="tipo">
            <option value="0">Pittura</option>
            <option value="1">Scultura</option>
            <option value="2">Carboncino</option>
            <option value="3">Vita dell'autore</option>
        </select>    


        <select name="giorno" id="giorno">
            <option value="0">Giorno</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
        </select>

        <select name="mese" id="mese">
            <option value="0">Mese</option>
            <option value="1">gennaio</option>
            <option value="2">febbraio</option>
            <option value="3">marzo</option>
            <option value="4">aprile</option>
            <option value="5">maggio</option>
            <option value="6">giugno</option>
            <option value="7">luglio</option>
            <option value="8">agosto</option>
            <option value="9">settembre</option>
            <option value="10">ottobre</option>
            <option value="11">novembre</option>
            <option value="12">dicembre</option>
        </select>
    </form>
</body>
</html>

[Marcolino's]

Non metto in dubbio quello che dite, anzi mi fa piacere anche se non mi risolve nulla, per ora non posso verificare dato che tutto il codice è sul mio PC mentre ora sono in ufficio.

[Marcolino's]

E allora? Allora l'ho ricreato, in forma semplice ovviamente

<!DOCTYPE html>
<html lang="it" dir="ltr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    
    <body>
    
        <div id="cliccante">
            <p id="anno">2500</p>
            <p>Scultura<input type="hidden" id="tipologia" value="1"></p>
            <p>giorno 31<input type="hidden" id="giornata" value="31"></p>
            <p>Mese maggio<input type="hidden" id="mesata" value="5"></p>
            <p><button type="button" id="copia">COPIA i DATI</button></p>
        </div>
        
        <form method="post" action="#">
            <p><button type="button" id="cancella">CANCELLA</button></p>
        
            <p><input type="text" id="annata" value=""></p>
            
            <p><label for="tipo">Tipo</label>
        <select id="tipo" name="tipo">
            <option value="0">Pittura</option>
            <option value="1">Scultura</option>
            <option value="2">Carboncino</option>
            <option value="3">Vita dell'autore</option>
        </select>
            </p>

            <p><label for="giorno">Giorno</label>
        <select name="giorno" id="giorno">
            <option value="0">Giorno</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
        </select>
            </p>

            <p><label for="mese">Mese</label>
        <select name="mese" id="mese">
            <option value="0">Mese</option>
            <option value="1">gennaio</option>
            <option value="2">febbraio</option>
            <option value="3">marzo</option>
            <option value="4">aprile</option>
            <option value="5">maggio</option>
            <option value="6">giugno</option>
            <option value="7">luglio</option>
            <option value="8">agosto</option>
            <option value="9">settembre</option>
            <option value="10">ottobre</option>
            <option value="11">novembre</option>
            <option value="12">dicembre</option>
        </select>
            </p>

        </form>
        
        <script src="jquery-1.12.3.min.js"></script>
        <script>
            $(document).ready(function() 
            {
                $('#copia').on('click', function(){
                    $('#annata').val( $('#anno').text() );
                    $('#tipo option[value=' + $('#tipologia').val() + ']').attr('selected', 'selected');
                    $('#giorno option[value=' + $('#giornata').val() + ']').attr('selected', 'selected');
                    $('#mese option[value=' + $('#mesata').val() + ']').attr('selected', 'selected');
                });
                
                $('#cancella').on('click', function(){
                    if (confirm("Sicuro che vuoi cancellare il form per ricominciare da capo?") === true)
                    {
                        $('form')[0].reset();
                    }
                });
            });
        </script>
    </body>
</html>

Allora, se non uso il tasto [COPIA I DATI] non ci sono problemi e il form viene resettato, e come vedete ho usato solo il reset() senza andare a parare nei campi select. Così funziona!
Ma se clicco sul tasto [COPIA I DATI] che comunque è la situazione reale, allora di nuovo, i campi select non vengono più resettati, o meglio, vengono resettati con i dati Scultura, 31 e 5 (maggio).
Credo che il problema derivi dal fatto che vengano definiti le option selected tramite il javascript e il reset le riporta a quel punto e non al valore iniziale.

[Marcolino's]

Gira, gira ho trovata la soluzione, un po' farraginosa ma funziona.
In pratica, prima di riselezionare a reset i campi select, deseleziono quello che c'era prima; un po' farraginoso lo ripeto ma funziona, se qualcun altro ha soluzioni migliori lo dica pure
Ecco il javascript modificato, è l'unica cosa da modificare

$(document).ready(function() 
            {
                var tipo, giorno, mese;
                $('#copia').on('click', function(){
                    tipo = $('#tipologia').val();
                    giorno = $('#giornata').val();
                    mese = $('#mesata').val();
                    $('#annata').val( $('#anno').text() );
                    $('#tipo option[value=' + tipo + ']').attr('selected', true);
                    $('#giorno option[value=' + giorno + ']').attr('selected', true);
                    $('#mese option[value=' + mese + ']').attr('selected', true);
                });
                
                $('#cancella').on('click', function(){
                    if (confirm("Sicuro che vuoi cancellare il form per ricominciare da capo?") === true)
                    {
                        $('form')[0].reset();
                        $('#tipo option[value=' + tipo + ']').attr('selected', false);
                        $('#giorno option[value=' + giorno + ']').attr('selected', false);
                        $('#mese option[value=' + mese + ']').attr('selected', false);
                        $('#tipo option[value=0]').attr('selected', true);
                        $('#giorno option[value=0]').attr('selected', true);
                        $('#mese option[value=0]').attr('selected', true);
                    }
                });
});

In sostanza creo tre variabili globali: tipo, giorno e mese che valorizzo col tasto [copia i valori] e che mi servono per deselezionare i valori selected = false, prima di fare il selected=true con i nuovi valori.
Funziona, anche se non mi piace