Valore di default in una select con jQuery Mobile

Creare un componente select in jQuery Mobile non è niente di speciale.

Basta il classico codice HTML, condito magari da qualche attributo per lo stile.

Ma quando si tratta di impostare un valore di default, non basta il classico attributo selected.

Bisogna agire di Javascript con un piccolo trucco.

Prima di tutto dobbiamo considerare l'evento pageshow di JQM; è qui che andremo a fare il tutto.

Quindi partendo da una select (nel mio caso riempita da PHP, giusto per far vedere l'interazione tra i componenti):

                   <select  id="up_allenamento">
                        <?php foreach ($query as $var): ?>
                            <option value="<?php echo $var['ra_id']; ?>">
                                <?php echo $var['ra_nome'] . ' - ' . $var['ra_distanza']; ?>
                            </option>
                        <?php endforeach; ?>
                    </select>

Alla fine della pagina andremo a creare le operazioni per l'evento pageshow:

        <script>
            $('#my_page').on('pageshow', function() {

                $("#my_select option").each(function() {
                    if (this.value === 3) {
                        var my_select = $("select#my_select");
                        my_select[0].value = this.value;
                       my_select.selectmenu("refresh");
                    }
                });
            });
        </script>

3 è un valore a caso ovviamente; dovete adattarlo al vostro codice.

In pratica andiamo ad impostare il valore da selezionare dopo che è già stata caricata; poi ne facciamo il refresh e il gioco è fatto!

Ciao!